From f23e196b4f5d6e12c10ecbae77941473349c8bca Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Mon, 13 Jan 2025 14:05:51 -0500
Subject: [PATCH] UX: Switch button focus state to focus-visible (#30744)

From https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible:

> The :focus-visible pseudo-class applies while an element matches the
[:focus](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)
pseudo-class and the UA ([User
Agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent))
determines via heuristics that the focus should be made evident on the
element. (Many browsers show a "focus ring" by default in this case.)

This change switches buttons over to `:focus-visible` which shouldn't
change much, except for situations where focus state may linger in cases
when it's not desired, like the tracking button here for example:


![image](https://github.com/user-attachments/assets/57aaa193-0960-4757-a461-47fdcca7de2a)


When using `focus-visible` the `focus` state is no longer visible after
a tap, but the focus state will still appear when using keyboard
navigation or assistive technology like VoiceOver, as seen here:


<img
src="https://github.com/user-attachments/assets/62398532-3e05-4979-91a4-d3ddeb4758cb"
width="300" />
---
 app/assets/stylesheets/common/base/modal.scss |  5 ++++
 .../common/components/buttons.scss            | 28 ++++++-------------
 2 files changed, 14 insertions(+), 19 deletions(-)

diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 1ad8a3d848f..cae867fb4c8 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -41,6 +41,11 @@
         font-size: var(--font-up-2);
         color: var(--primary-high);
       }
+      &:focus-visible {
+        .d-icon {
+          color: var(--primary);
+        }
+      }
     }
   }
 
diff --git a/app/assets/stylesheets/common/components/buttons.scss b/app/assets/stylesheets/common/components/buttons.scss
index 65953f38054..b23442cd2e9 100644
--- a/app/assets/stylesheets/common/components/buttons.scss
+++ b/app/assets/stylesheets/common/components/buttons.scss
@@ -62,7 +62,7 @@
       }
     }
   }
-  &:focus {
+  &:focus-visible {
     outline: none;
     background-color: $hover-bg-color;
     color: $hover-text-color;
@@ -72,10 +72,6 @@
         color: Highlight;
       }
     }
-
-    &:focus-visible {
-      @include darken-background($hover-bg-color, 0.1);
-    }
   }
 
   .discourse-no-touch &:active:not(:hover):not(:focus),
@@ -201,7 +197,7 @@
   color: #000;
   background: #fff;
   border-radius: var(--d-border-radius);
-  &:focus {
+  &:focus-visible {
     outline: 1px solid #000;
   }
   &[href] {
@@ -289,7 +285,7 @@
   }
   .discourse-no-touch & {
     &:hover,
-    &:focus {
+    &:focus-visible {
       color: var(--primary);
       .d-icon {
         color: var(--primary);
@@ -298,7 +294,7 @@
     &:hover {
       background: transparent;
     }
-    &:focus {
+    &:focus-visible {
       background: var(--primary-low);
     }
   }
@@ -310,14 +306,14 @@
     }
     .discourse-no-touch & {
       &:hover,
-      &:focus {
+      &:focus-visible {
         background: transparent;
         .d-icon {
           color: var(--primary);
         }
       }
     }
-    &:focus {
+    &:focus-visible {
       background: transparent;
       .d-icon {
         color: var(--primary);
@@ -330,14 +326,14 @@
       &,
       &:hover,
       &.btn-hover,
-      &:focus {
+      &:focus-visible {
         color: var(--primary);
       }
     }
     &:not([disabled]) {
       &:hover,
       &.btn-hover,
-      &:focus {
+      &:focus-visible {
         color: var(--tertiary-hover);
       }
 
@@ -347,7 +343,7 @@
       }
     }
   }
-  &:focus {
+  &:focus-visible {
     outline: none;
     background: var(--primary-low);
     .d-icon {
@@ -370,10 +366,6 @@
       background: transparent;
     }
   }
-  &:focus {
-    color: var(--tertiary);
-    background: transparent;
-  }
   &:focus-visible {
     color: var(--tertiary);
     background: transparent;
@@ -386,7 +378,6 @@
   .d-icon {
     color: inherit;
   }
-  &:focus,
   &:focus-visible {
     color: var(--#{$btn-color}-hover);
   }
@@ -406,7 +397,6 @@
     .d-icon {
       color: var(--primary-high);
     }
-    &:focus,
     &:focus-visible {
       background: transparent;
       color: var(--tertiary-hover);