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.
This commit is contained in:
Otto Richter 2024-02-18 17:28:35 +01:00
parent 30e0b2f851
commit 4d2c019b5a
2 changed files with 37 additions and 33 deletions

View file

@ -1935,9 +1935,9 @@ table th[data-sortt-desc] .svg {
} }
.ui.secondary.pointing.menu .active.item, .ui.secondary.pointing.menu .active.item,
.ui.secondary.pointing.menu .active.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:hover, .ui.secondary.pointing.menu .dropdown.item:focus,
.ui.secondary.pointing.menu a.item:hover { .ui.secondary.pointing.menu a.item:hover, .ui.secondary.pointing.menu a.item:focus {
color: var(--color-text-dark); color: var(--color-text-dark);
} }

View file

@ -1,14 +1,14 @@
/* this contains override styles for buttons and related elements */ /* 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 */ /* these styles changed the Fomantic UI's rules, Fomantic UI expects only "basic" buttons have borders */
.ui.button, .ui.button {
.ui.button:focus {
background: var(--color-button); background: var(--color-button);
border: 1px solid var(--color-light-border); border: 1px solid var(--color-light-border);
color: var(--color-text); color: var(--color-text);
} }
.ui.button:hover { .ui.button:hover,
.ui.button:focus {
background: var(--color-hover); background: var(--color-hover);
color: var(--color-text); color: var(--color-text);
} }
@ -20,13 +20,15 @@
.ui.active.button, .ui.active.button,
.ui.button:active, .ui.button:active,
.ui.active.button:active, .ui.active.button:active,
.ui.active.button:hover { .ui.active.button:hover,
.ui.active.button:focus {
background: var(--color-active); background: var(--color-active);
color: var(--color-text); color: var(--color-text);
} }
.delete-button, .delete-button,
.delete-button:hover { .delete-button:hover,
.delete-button:focus {
color: var(--color-red); 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.labeled.button.disabled > .button,
.ui.basic.buttons .button, .ui.basic.buttons .button,
.ui.basic.button, .ui.basic.button {
.ui.basic.buttons .button:focus,
.ui.basic.button:focus {
color: var(--color-text-light); color: var(--color-text-light);
background: var(--color-button); background: var(--color-button);
} }
.ui.basic.buttons .button:hover, .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); color: var(--color-text);
background: var(--color-hover); 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.buttons .active.button,
.ui.basic.active.button, .ui.basic.active.button,
.ui.basic.buttons .active.button:hover, .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); color: var(--color-text);
background: var(--color-active); 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.primary.labels .label,
.ui.ui.ui.primary.label, .ui.ui.ui.primary.label,
.ui.primary.button, .ui.primary.button,
.ui.primary.buttons .button, .ui.primary.buttons .button {
.ui.primary.button:focus,
.ui.primary.buttons .button:focus {
background: var(--color-primary); background: var(--color-primary);
color: var(--color-primary-contrast); color: var(--color-primary-contrast);
} }
.ui.primary.button:hover, .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); background: var(--color-primary-hover);
color: var(--color-primary-contrast); 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.buttons .button,
.ui.basic.primary.button, .ui.basic.primary.button{
.ui.basic.primary.buttons .button:focus,
.ui.basic.primary.button:focus {
color: var(--color-primary); color: var(--color-primary);
border-color: var(--color-primary); border-color: var(--color-primary);
} }
.ui.basic.primary.buttons .button:hover, .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); color: var(--color-primary-hover);
border-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.buttons .button,
.ui.basic.secondary.button, .ui.basic.secondary.button {
.ui.basic.secondary.button:focus,
.ui.basic.secondary.buttons .button:focus {
color: var(--color-secondary-button); color: var(--color-secondary-button);
border-color: var(--color-secondary-button); border-color: var(--color-secondary-button);
} }
.ui.basic.secondary.buttons .button:hover, .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); color: var(--color-secondary-hover);
border-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.red.labels .label,
.ui.ui.ui.red.label, .ui.ui.ui.red.label,
.ui.red.button, .ui.red.button,
.ui.red.buttons .button, .ui.red.buttons .button {
.ui.red.button:focus,
.ui.red.buttons .button:focus {
background: var(--color-red); background: var(--color-red);
} }
.ui.red.button:hover, .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); 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.buttons .button,
.ui.basic.red.button, .ui.basic.red.button {
.ui.basic.red.buttons .button:focus,
.ui.basic.red.button:focus {
color: var(--color-red); color: var(--color-red);
border-color: var(--color-red); border-color: var(--color-red);
} }
.ui.basic.red.buttons .button:hover, .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); color: var(--color-red-dark-1);
border-color: var(--color-red-dark-1); border-color: var(--color-red-dark-1);
} }