Adding focus-visible styles with polyfill (#3695)

* Adding focus-visible polyfill * Adding to UNRELEASED changelog * Removing global styles and fixing tooltip activator * Fixing test
Shopify · Feb 3, 2021 · 79c5b78 · 79c5b78
1 parent ccca9bf
commit 79c5b78
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 3 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -6,6 +6,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
+- Added `focus-visible` polyfill and default styles ([#3695](https://github.com/Shopify/polaris-react/pull/3695))
+
 ### Bug fixes
 
 - Fixed virtual cursor leaving dialog in `Modal`, `Navigation` and `Sheet` ([#3931](https://github.com/Shopify/polaris-react/pull/3931))

diff --git a/package.json b/package.json
@@ -84,6 +84,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.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/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx b/src/components/Popover/components/PopoverOverlay/tests/PopoverOverlay.test.tsx
@@ -405,7 +405,7 @@ describe('<PopoverOverlay />', () => {
         </PopoverOverlay>,
       );
 
-      expect(document.activeElement?.className).toBe('Content');
+      expect(document.activeElement?.className).toContain('Content');
     });
 
     it('does not focus when autofocusTarget is set to None', () => {

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

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -60,6 +60,7 @@ export function Tooltip({
 
     accessibilityNode.tabIndex = 0;
     accessibilityNode.setAttribute('aria-describedby', id);
+    accessibilityNode.setAttribute('data-polaris-tooltip-activator', 'true');
   }, [id, children]);
 
   const handleKeyUp = useCallback(

diff --git a/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss b/src/components/Tooltip/components/TooltipOverlay/TooltipOverlay.scss
@@ -34,3 +34,17 @@ $content-max-width: rem(200px);
   padding: spacing(extra-tight) spacing(tight);
   word-break: break-word;
 }
+
+[data-polaris-tooltip-activator] {
+  outline: 0;
+  @include focus-ring;
+
+  &:focus-visible {
+    @include focus-ring($style: 'focused');
+  }
+}
+
+// stylelint-disable-next-line selector-max-attribute
+[data-polaris-tooltip-activator][data-focus-visible-added] {
+  @include focus-ring($style: 'focused');
+}
diff --git a/yarn.lock b/yarn.lock
@@ -9755,6 +9755,18 @@ 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"
+  integrity sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==
+  dependencies:
+    debug "=3.1.0"
+
 follow-redirects@^1.0.0:
   version "1.13.0"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"