diff --git a/package.json b/package.json
index 6b3deea7abb..54101398106 100644
--- a/package.json
+++ b/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",
diff --git a/src/desktop/components/react/stitch_components/StitchWrapper.tsx b/src/desktop/components/react/stitch_components/StitchWrapper.tsx
index ede83e0b415..6e25f985735 100644
--- a/src/desktop/components/react/stitch_components/StitchWrapper.tsx
+++ b/src/desktop/components/react/stitch_components/StitchWrapper.tsx
@@ -3,6 +3,7 @@ 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")
@@ -10,7 +11,10 @@ export const StitchWrapper = props => {
return (
- {props.children}
+
+
+ {props.children}
+
)
diff --git a/src/v2/Artsy/Router/Boot.tsx b/src/v2/Artsy/Router/Boot.tsx
index 5ca357d4ec8..81cda748301 100644
--- a/src/v2/Artsy/Router/Boot.tsx
+++ b/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, {
>
+
{children}
{process.env.NODE_ENV === "development" && (
diff --git a/src/v2/Components/FocusVisible.tsx b/src/v2/Components/FocusVisible.tsx
new file mode 100644
index 00000000000..4b095647a12
--- /dev/null
+++ b/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. 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")};
+ }
+`
diff --git a/yarn.lock b/yarn.lock
index 4cd06cd1fb1..681967e8274 100644
--- a/yarn.lock
+++ b/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"