fix(a11y): hide focus outline when not tabbing

jwplayer · Jun 12, 2024 · 3d1cbf1 · 3d1cbf1
1 parent 70c34c5
commit 3d1cbf1
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/packages/ui-react/src/styles/accessibility.scss b/packages/ui-react/src/styles/accessibility.scss
@@ -41,13 +41,15 @@ $focus-box-shadow: 0 0 1px 5px var(--highlight-color, variables.$white),
 @mixin globalClassNames {
   /* Clearly visible focus rectangle (WCAG guidelines). */
   @media (hover: hover) and (pointer: fine) {
-    a,
-    [role='button'],
-    button,
-    input {
-      &:focus {
-        outline: 2px solid var(--highlight-color, #fff);
-        box-shadow: 0 0 2px 3px var(--highlight-contrast-color, #000);
+    body.is-tabbing {
+      a,
+      [role='button'],
+      button,
+      input {
+        &:focus {
+          outline: 2px solid var(--highlight-color, #fff);
+          box-shadow: 0 0 2px 3px var(--highlight-contrast-color, #000);
+        }
       }
     }
   }