pub-solar/forgejo
5
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add focus styling to most button types

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

6
web_src/css/base.css
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);
} }

64
web_src/css/modules/button.css
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);
} }