Polyfills :focus-visible; adds :focus-visible outlines

package.json

@@ -135,6 +135,7 @@
     "fastclick": "1.0.6",
     "flickity": "2.1.2",
     "flickity-imagesloaded": "2.0.0",
+    "focus-visible": "^5.1.0",
     "forever": "0.15.3",
     "found": "0.4.9",
     "found-relay": "0.5.0",

src/desktop/components/react/stitch_components/StitchWrapper.tsx

@@ -3,14 +3,18 @@ import { data as sd } from "sharify"
 import { SystemContextProvider } from "v2/Artsy"
 import { MediaContextProvider } from "v2/Utils/Responsive"
 import { Theme } from "@artsy/palette"
+import { FocusVisible } from "v2/Components/FocusVisible"
 
 const mediator = require("desktop/lib/mediator.coffee")
 
 export const StitchWrapper = props => {
   return (
     <Theme>
       <SystemContextProvider user={sd.CURRENT_USER} mediator={mediator}>
-        <MediaContextProvider>{props.children}</MediaContextProvider>
+        <MediaContextProvider>
+          <FocusVisible />
+          {props.children}
+        </MediaContextProvider>
       </SystemContextProvider>
     </Theme>
   )

src/v2/Artsy/Router/Boot.tsx

@@ -11,6 +11,7 @@ import { BreakpointVisualizer } from "v2/Utils/BreakpointVisualizer"
 import Events from "v2/Utils/Events"
 import { getENV } from "v2/Utils/getENV"
 import { ErrorBoundary } from "./ErrorBoundary"
+import { FocusVisible } from "v2/Components/FocusVisible"
 
 import {
   MatchingMediaQueries,
@@ -71,6 +72,7 @@ export const Boot = track(null, {
                 >
                   <Grid fluid maxWidth="100%">
                     <GlobalStyles />
+                    <FocusVisible />
                     {children}
                     {process.env.NODE_ENV === "development" && (
                       <BreakpointVisualizer />

src/v2/Components/FocusVisible.tsx

@@ -0,0 +1,18 @@
+import "focus-visible"
+import { color } from "@artsy/palette"
+import { createGlobalStyle } from "styled-components"
+
+export const FocusVisible = createGlobalStyle`
+  /**
+  * This will hide the focus indicator if the element receives focus via the mouse,
+  * but it will still show up on keyboard focus. <input> tags are an exception to this.
+  */
+  .js-focus-visible :focus:not(.focus-visible) {
+    outline: 0;
+  }
+
+  /* Custom outlines on :focus-visible */
+  .focus-visible {
+    outline: 1px solid ${color("purple100")};
+  }
+`

yarn.lock

@@ -10561,6 +10561,11 @@ focus-lock@^0.6.3, focus-lock@^0.6.7:
   resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.8.tgz#61985fadfa92f02f2ee1d90bc738efaf7f3c9f46"
   integrity sha512-vkHTluRCoq9FcsrldC0ulQHiyBYgVJB2CX53I8r0nTC6KnEij7Of0jpBspjt3/CuNb6fyoj3aOh9J2HgQUM0og==
 
+focus-visible@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.1.0.tgz#4b9d40143b865f53eafbd93ca66672b3bf9e7b6a"
+  integrity sha512-nPer0rjtzdZ7csVIu233P2cUm/ks/4aVSI+5KUkYrYpgA7ujgC3p6J7FtFU+AIMWwnwYQOB/yeiOITxFeYIXiw==
+
 for-each@~0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/for-each/-/for-each-0.3.2.tgz#2c40450b9348e97f281322593ba96704b9abd4d4"