fix(a11y): hide focus outline when not tabbing

Author: ChristiaanScheermeijer

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);
+        }
       }
     }
   }