From 4d2c019b5abc920737ca857b433b799b679fec1d Mon Sep 17 00:00:00 2001
From: Otto Richter <git@otto.splvs.net>
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);
 }