fix(a11y): remove outline when user is not tabbing

packages/ui-react/src/styles/accessibility.scss

@@ -4,17 +4,19 @@
 // Instead, we apply styles to the focus state first, which solves the purpose, but unwantedly also for the active state
 // We fix this for non-Safari browsers afterwards by resetting to default and then re-applying using focus-visible
 $focus-box-shadow: 0 0 1px 5px var(--highlight-color, variables.$white),
-  0 0 12px 6px rgb(0 0 0 / 80%);
+0 0 12px 6px rgb(0 0 0 / 80%);
 
 @mixin focus-visible($value: $focus-box-shadow, $default-value: none) {
   @media (hover: hover) and (pointer: fine) {
     &:not(:disabled) {
       &:focus {
         @content ($value);
       }
+
       &:focus:not(:focus-visible) {
         @content ($default-value);
       }
+
       &:focus-visible {
         @content ($value);
       }
@@ -23,13 +25,17 @@ $focus-box-shadow: 0 0 1px 5px var(--highlight-color, variables.$white),
 }
 
 @mixin accessibleOutline {
-  outline: 2px solid var(--highlight-color, #fff);
-  box-shadow: 0 0 2px 3px var(--highlight-contrast-color, #000);
+  body.is-tabbing & {
+    outline: 2px solid var(--highlight-color, #fff);
+    box-shadow: 0 0 2px 3px var(--highlight-contrast-color, #000);
+  }
 }
 
 @mixin accessibleOutlineContrast {
-  outline: 2px solid var(--highlight-contrast-color, #fff);
-  box-shadow: 0 0 2px 3px var(--highlight-color, #000);
+  body.is-tabbing & {
+    outline: 2px solid var(--highlight-contrast-color, #fff);
+    box-shadow: 0 0 2px 3px var(--highlight-color, #000);
+  }
 }
 
 @mixin globalClassNames {

platforms/web/src/index.tsx

@@ -8,6 +8,8 @@ import './modules/register';
 
 import App from './App';
 
+import { attachAccessibilityListener } from '#src/utils/accessibility';
+
 // Collect env vars
 configureEnv({
   APP_VERSION: import.meta.env.APP_VERSION,
@@ -23,6 +25,8 @@ configureEnv({
   APP_BODY_ALT_FONT: import.meta.env.APP_BODY_ALT_FONT,
 });
 
+attachAccessibilityListener();
+
 const rootElement = document.getElementById('root');
 
 if (rootElement) {

platforms/web/src/utils/accessibility.ts

@@ -0,0 +1,20 @@
+export const attachAccessibilityListener = () => {
+  let isTabbing = false;
+
+  // when the user presses the Tab key, we add a `is-tabbing` className to the body element, so we can enable outline
+  // focus for keyboard users
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Tab' && !isTabbing) {
+      isTabbing = true;
+      document.body.classList.add('is-tabbing');
+    }
+  });
+
+  // remove the `is-tabbing` className when the user uses a mouse again to interact with elements
+  document.addEventListener('mousedown', () => {
+    if (isTabbing) {
+      isTabbing = false;
+      document.body.classList.remove('is-tabbing');
+    }
+  });
+};