Adding focus-visible polyfill

Shopify · Dec 9, 2020 · 67ee8c4 · 67ee8c4
1 parent 408ff13
commit 67ee8c4
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -85,6 +85,7 @@
     "@types/react": "^16.9.12",
     "@types/react-dom": "^16.9.4",
     "@types/react-transition-group": "^4.4.0",
+    "focus-visible": "^5.2.0",
     "lodash": "^4.17.4",
     "react-transition-group": "^4.4.1"
   },

diff --git a/src/components/AppProvider/AppProvider.scss b/src/components/AppProvider/AppProvider.scss
@@ -62,6 +62,29 @@ body {
   box-sizing: border-box;
 }
 
+:focus:not(:focus-visible) {
+  outline: none;
+}
+
+:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 rem(2px) var(--p-focused, color('indigo'));
+  border-radius: var(--p-border-radius-base);
+}
+
+[data-js-focus-visible] {
+  :focus:not([data-focus-visible-added]) {
+    outline: none;
+  }
+
+  // stylelint-disable-next-line selector-max-attribute
+  [data-focus-visible-added] {
+    outline: none;
+    box-shadow: 0 0 0 rem(2px) var(--p-focused, color('indigo'));
+    border-radius: var(--p-border-radius-base);
+  }
+}
+
 h1,
 h2,
 h3,

diff --git a/src/components/AppProvider/AppProvider.tsx b/src/components/AppProvider/AppProvider.tsx
@@ -1,4 +1,5 @@
 import React, {Component} from 'react';
+import 'focus-visible/dist/focus-visible';
 
 import type {ThemeConfig} from '../../utilities/theme';
 import {ThemeProvider} from '../ThemeProvider';

diff --git a/src/components/Tooltip/README.md b/src/components/Tooltip/README.md
@@ -69,7 +69,7 @@ Use only when necessary to provide an explanation for an interface element.
 ```jsx
 <div style={{padding: '75px 0'}}>
   <Tooltip active content="This order has shipping labels.">
-    <Link>Order #1001</Link>
+    <TextStyle variation="strong">Order #1001</TextStyle>
   </Tooltip>
 </div>
 ```

diff --git a/yarn.lock b/yarn.lock
@@ -9590,6 +9590,11 @@ focus-lock@^0.6.6:
   resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.6.tgz#98119a755a38cfdbeda0280eaa77e307eee850c7"
   integrity sha512-Dx69IXGCq1qsUExWuG+5wkiMqVM/zGx/reXSJSLogECwp3x6KeNQZ+NAetgxEFpnC41rD8U3+jRCW68+LNzdtw==
 
+focus-visible@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/focus-visible/-/focus-visible-5.2.0.tgz#3a9e41fccf587bd25dcc2ef045508284f0a4d6b3"
+  integrity sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ==
+
 follow-redirects@1.5.10:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"