Add :focus-visible polyfill (#123)

src/components/internal/FocusVisiblePolyfill.js

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+import useWindow from "../../hooks/useWindow";
+
+function FocusVisiblePolyfill() {
+  const [isKeyboardMode, setIsKeyboardMode] = useState(false);
+  const onKeyDown = () => setIsKeyboardMode(true);
+  const onMouseDown = () => setIsKeyboardMode(false);
+  const window = useWindow();
+
+  useEffect(() => {
+    if (window) {
+      window.addEventListener("keydown", onKeyDown);
+      window.addEventListener("mousedown", onMouseDown);
+    }
+
+    return () => {
+      if (window) {
+        window.removeEventListener("keydown", onKeyDown);
+        window.removeEventListener("mousedown", onMouseDown);
+      }
+    };
+  }, [window]);
+
+  useEffect(() => {
+    if (window) {
+      window.document.body.dataset.basisKeyboardMode = String(isKeyboardMode);
+    }
+  }, [window, isKeyboardMode]);
+
+  return null;
+}
+
+export default FocusVisiblePolyfill;

src/providers/BasisProvider.js

@@ -4,6 +4,7 @@ import WindowProvider from "./WindowProvider";
 import BreakpointProvider from "./BreakpointProvider";
 import LinkProvider from "./LinkProvider";
 import { enhanceTheme } from "../utils/theme";
+import FocusVisiblePolyfill from "../components/internal/FocusVisiblePolyfill";
 
 export const ThemeContext = React.createContext();
 
@@ -19,6 +20,7 @@ function BasisProvider({
   return (
     <ThemeContext.Provider value={enhancedTheme}>
       <WindowProvider window={window}>
+        <FocusVisiblePolyfill />
         <BreakpointProvider>
           <LinkProvider
             InternalLink={InternalLink}

src/themes/default/accordion.js

@@ -25,6 +25,7 @@ export default (theme) => ({
     textAlign: "left",
     ...textStyles(theme)["subtitle2"],
     ...textStyles(theme)["subtitle2.bold"],
+    outline: 0,
     ...theme.focusStyles.focusVisible,
   },
   accordionHeaderContent: {

src/themes/default/button.js

@@ -10,6 +10,7 @@ export default (theme) => ({
     overflow: "hidden",
     transition: theme.transitions.button,
     borderRadius: theme.radii[1],
+    outline: 0,
     ...theme.focusStyles.focusVisible,
     "a &": {
       cursor: "pointer",

src/themes/default/dropdown.js

@@ -13,6 +13,7 @@ export default (theme) => ({
     margin: 0,
     border: 0,
     borderRadius: theme.radii[0],
+    outline: 0,
     ...theme.focusStyles.focusVisible,
   },
   dropdownButtonPlaceholder: {

src/themes/default/index.js

@@ -200,61 +200,28 @@ theme.shadows = {
   focus: `0 0 0px ${theme.radii[1]} ${theme.colors.secondary.lightBlue.t80}`,
 };
 
+const focusStyle = {
+  boxShadow: theme.shadows.focus,
+  // Make sure that the focus style sits above the surrounding elements with normal page flow
+  position: "relative",
+  zIndex: theme.zIndices.aboveNormalFlow,
+};
+
 theme.focusStyles = {
-  // https://github.com/WICG/focus-visible#backwards-compatibility
   focusVisible: {
-    // Provide basic, default focus styles.
     ":focus": {
-      outline: 0,
-      boxShadow: theme.shadows.focus,
-      // Make sure that the focus style sits above the surrounding elements with normal page flow
-      position: "relative",
-      zIndex: theme.zIndices.aboveNormalFlow,
-    },
-    // Remove default focus styles for mouse users ONLY if :focus-visible is supported on this platform.
-    ":focus:not(:focus-visible)": {
-      boxShadow: "none",
-      position: "initial",
-      zIndex: "initial",
-    },
-    // If :focus-visible is supported on this platform, provide enhanced focus styles for keyboard focus.
-    ":focus-visible": {
-      boxShadow: theme.shadows.focus,
-      // Make sure that the focus style sits above the surrounding elements with normal page flow
-      position: "relative",
-      zIndex: theme.zIndices.aboveNormalFlow,
+      '[data-basis-keyboard-mode="true"] &': focusStyle,
     },
   },
   focusVisibleAdjacentLabel: {
     ":focus + label": {
-      boxShadow: theme.shadows.focus,
-      // Make sure that the focus style sits above the surrounding elements with normal page flow
-      position: "relative",
-      zIndex: theme.zIndices.aboveNormalFlow,
-    },
-    ":focus:not(:focus-visible) + label": {
-      boxShadow: "none",
-      position: "initial",
-      zIndex: "initial",
-    },
-    ":focus-visible + label": {
-      boxShadow: theme.shadows.focus,
-      // Make sure that the focus style sits above the surrounding elements with normal page flow
-      position: "relative",
-      zIndex: theme.zIndices.aboveNormalFlow,
+      '[data-basis-keyboard-mode="true"] &': focusStyle,
     },
   },
 };
 
-theme.focusStyles.__keyboardFocus = {
-  ...theme.focusStyles.focusVisible[":focus"],
-  ...theme.focusStyles.focusVisible[":focus-visible"],
-};
-
-theme.focusStyles.__keyboardFocusAdjacentLabel = {
-  ...theme.focusStyles.focusVisibleAdjacentLabel[":focus + label"],
-  ...theme.focusStyles.focusVisibleAdjacentLabel[":focus-visible + label"],
-};
+theme.focusStyles.__keyboardFocus = focusStyle;
+theme.focusStyles.__keyboardFocusAdjacentLabel = focusStyle;
 
 export default {
   ...theme,

src/themes/default/link.js

@@ -4,6 +4,7 @@ export default (theme) => ({
   link: {
     textDecoration: "none",
     borderRadius: theme.radii[0],
+    outline: 0,
     ...theme.focusStyles.focusVisible,
   },
   "link.light-bg": {

website/src/themes/website/button.js

@@ -10,6 +10,7 @@ export default (theme) => ({
     overflow: "hidden",
     transition:
       "transform 100ms ease, color 100ms ease, border-color 100ms ease",
+    outline: 0,
     ...theme.focusStyles.focusVisible,
   },
   "button:disabled": {

website/src/themes/website/link.js

@@ -3,6 +3,7 @@ export default (theme) => ({
     display: "inline-block",
     textDecoration: "none",
     borderRadius: theme.radii[0],
+    outline: 0,
     ...theme.focusStyles.focusVisible,
   },
   "link.light-bg": {