From 4d2c019b5abc920737ca857b433b799b679fec1d Mon Sep 17 00:00:00 2001 From: Otto Richter Date: Sun, 18 Feb 2024 17:28:35 +0100 Subject: [PATCH] Add focus styling to most button types While it might be favourable to have distinct focus and hover styling, having no focus styling at all makes keyboard navigation very difficult. Some people consider :focus to be equal to a keyboard-driven :hover, so I'm moving the focus pseudo-classes from being a no-op to adding the hover styling. --- web_src/css/base.css | 6 ++-- web_src/css/modules/button.css | 64 ++++++++++++++++++---------------- 2 files changed, 37 insertions(+), 33 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 9cad9c5d23..bb45c8d325 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1935,9 +1935,9 @@ table th[data-sortt-desc] .svg { } .ui.secondary.pointing.menu .active.item, -.ui.secondary.pointing.menu .active.item:hover, -.ui.secondary.pointing.menu .dropdown.item:hover, -.ui.secondary.pointing.menu a.item:hover { +.ui.secondary.pointing.menu .active.item:hover, .ui.secondary.pointing.menu .active.item:focus, +.ui.secondary.pointing.menu .dropdown.item:hover, .ui.secondary.pointing.menu .dropdown.item:focus, +.ui.secondary.pointing.menu a.item:hover, .ui.secondary.pointing.menu a.item:focus { color: var(--color-text-dark); } diff --git a/web_src/css/modules/button.css b/web_src/css/modules/button.css index 36cb499aeb..b772a4c14e 100644 --- a/web_src/css/modules/button.css +++ b/web_src/css/modules/button.css @@ -1,14 +1,14 @@ /* this contains override styles for buttons and related elements */ /* these styles changed the Fomantic UI's rules, Fomantic UI expects only "basic" buttons have borders */ -.ui.button, -.ui.button:focus { +.ui.button { background: var(--color-button); border: 1px solid var(--color-light-border); color: var(--color-text); } -.ui.button:hover { +.ui.button:hover, +.ui.button:focus { background: var(--color-hover); color: var(--color-text); } @@ -20,13 +20,15 @@ .ui.active.button, .ui.button:active, .ui.active.button:active, -.ui.active.button:hover { +.ui.active.button:hover, +.ui.active.button:focus { background: var(--color-active); color: var(--color-text); } .delete-button, -.delete-button:hover { +.delete-button:hover, +.delete-button:focus { color: var(--color-red); } @@ -87,15 +89,15 @@ It needs some tricks to tweak the left/right borders with active state */ .ui.labeled.button.disabled > .button, .ui.basic.buttons .button, -.ui.basic.button, -.ui.basic.buttons .button:focus, -.ui.basic.button:focus { +.ui.basic.button { color: var(--color-text-light); background: var(--color-button); } .ui.basic.buttons .button:hover, -.ui.basic.button:hover { +.ui.basic.button:hover, +.ui.basic.buttons .button:focus, +.ui.basic.button:focus { color: var(--color-text); background: var(--color-hover); } @@ -105,7 +107,9 @@ It needs some tricks to tweak the left/right borders with active state */ .ui.basic.buttons .active.button, .ui.basic.active.button, .ui.basic.buttons .active.button:hover, -.ui.basic.active.button:hover { +.ui.basic.active.button:hover, +.ui.basic.buttons .active.button:focus, +.ui.basic.active.button:focus { color: var(--color-text); background: var(--color-active); } @@ -124,15 +128,15 @@ It needs some tricks to tweak the left/right borders with active state */ .ui.primary.labels .label, .ui.ui.ui.primary.label, .ui.primary.button, -.ui.primary.buttons .button, -.ui.primary.button:focus, -.ui.primary.buttons .button:focus { +.ui.primary.buttons .button { background: var(--color-primary); color: var(--color-primary-contrast); } .ui.primary.button:hover, -.ui.primary.buttons .button:hover { +.ui.primary.buttons .button:hover, +.ui.primary.button:focus, +.ui.primary.buttons .button:focus { background: var(--color-primary-hover); color: var(--color-primary-contrast); } @@ -143,15 +147,15 @@ It needs some tricks to tweak the left/right borders with active state */ } .ui.basic.primary.buttons .button, -.ui.basic.primary.button, -.ui.basic.primary.buttons .button:focus, -.ui.basic.primary.button:focus { +.ui.basic.primary.button{ color: var(--color-primary); border-color: var(--color-primary); } .ui.basic.primary.buttons .button:hover, -.ui.basic.primary.button:hover { +.ui.basic.primary.button:hover, +.ui.basic.primary.buttons .button:focus, +.ui.basic.primary.button:focus { color: var(--color-primary-hover); border-color: var(--color-primary-hover); } @@ -184,15 +188,15 @@ It needs some tricks to tweak the left/right borders with active state */ } .ui.basic.secondary.buttons .button, -.ui.basic.secondary.button, -.ui.basic.secondary.button:focus, -.ui.basic.secondary.buttons .button:focus { +.ui.basic.secondary.button { color: var(--color-secondary-button); border-color: var(--color-secondary-button); } .ui.basic.secondary.buttons .button:hover, -.ui.basic.secondary.button:hover { +.ui.basic.secondary.button:hover, +.ui.basic.secondary.button:focus, +.ui.basic.secondary.buttons .button:focus { color: var(--color-secondary-hover); border-color: var(--color-secondary-hover); } @@ -208,14 +212,14 @@ It needs some tricks to tweak the left/right borders with active state */ .ui.red.labels .label, .ui.ui.ui.red.label, .ui.red.button, -.ui.red.buttons .button, -.ui.red.button:focus, -.ui.red.buttons .button:focus { +.ui.red.buttons .button { background: var(--color-red); } .ui.red.button:hover, -.ui.red.buttons .button:hover { +.ui.red.buttons .button:hover, +.ui.red.button:focus, +.ui.red.buttons .button:focus { background: var(--color-red-dark-1); } @@ -225,15 +229,15 @@ It needs some tricks to tweak the left/right borders with active state */ } .ui.basic.red.buttons .button, -.ui.basic.red.button, -.ui.basic.red.buttons .button:focus, -.ui.basic.red.button:focus { +.ui.basic.red.button { color: var(--color-red); border-color: var(--color-red); } .ui.basic.red.buttons .button:hover, -.ui.basic.red.button:hover { +.ui.basic.red.button:hover, +.ui.basic.red.buttons .button:focus, +.ui.basic.red.button:focus { color: var(--color-red-dark-1); border-color: var(--color-red-dark-1); }