Remove focus-visible polyfill (#2032)

Author: gerardo-rodriguez

.changeset/tasty-points-speak.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Remove focus-visible polyfill

.storybook/preview.js

@@ -5,7 +5,6 @@ import twig from 'react-syntax-highlighter/dist/esm/languages/prism/twig';
 import { withTheme } from './theme-decorator';
 import { withTextFlow } from './text-flow-decorator';
 import tokens from '../src/compiled/tokens/js/tokens';
-import 'focus-visible';
 import '../src/index-with-dependencies.scss';
 import './preview.scss';
 import { makeTwigInclude } from '../src/make-twig-include';

package-lock.json

@@ -40,7 +40,6 @@
     "!src/index.scss"
   ],
   "dependencies": {
-    "focus-visible": "5.2.0",
     "prismjs": "1.29.0"
   },
   "devDependencies": {

package.json

@@ -25,7 +25,7 @@ More options are available via [the Heading component](/docs/components-heading-
 <Canvas>
   <Story name="Inline elements">
     {`<p>
-  <b>Progressive Web Apps</b> are awesome, <em>especially</em> when they make the <del>best</del> <ins>most</ins> of the web! That means using both tried and true <abbr title="HyperText Markup Language">HTML</abbr> techniques like <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">links</a> alongside new techniques like <code>display: grid</code> or <a href="https://github.com/WICG/focus-visible"><code>focus-visible</code></a>! You can use <kbd>ctrl</kbd> + <kbd>c</kbd> on Windows and <kbd>⌘</kbd> + <kbd>c</kbd> on Mac.
+  <b>Progressive Web Apps</b> are awesome, <em>especially</em> when they make the <del>best</del> <ins>most</ins> of the web! That means using both tried and true <abbr title="HyperText Markup Language">HTML</abbr> techniques like <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">links</a> alongside new techniques like <code>display: grid</code> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible"><code>:focus-visible</code></a>! You can use <kbd>ctrl</kbd> + <kbd>c</kbd> on Windows and <kbd>⌘</kbd> + <kbd>c</kbd> on Mac.
 </p>`}
   </Story>
 </Canvas>

src/design/defaults.stories.mdx

@@ -1,7 +1,7 @@
 {% embed '@cloudfour/objects/rhythm/rhythm.twig' %}
   {% block content %}
     <p>
-      <b>Progressive Web Apps</b> are awesome, <em>especially</em> when they make the <del>best</del> <ins>most</ins> of the web! That means using both tried and true <abbr title="HyperText Markup Language">HTML</abbr> techniques like <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">links</a> alongside new techniques like <code>display: grid</code> or <a href="https://github.com/WICG/focus-visible"><code>focus-visible</code></a>!
+      <b>Progressive Web Apps</b> are awesome, <em>especially</em> when they make the <del>best</del> <ins>most</ins> of the web! That means using both tried and true <abbr title="HyperText Markup Language">HTML</abbr> techniques like <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">links</a> alongside new techniques like <code>display: grid</code> or <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible"><code>:focus-visible</code></a>!
     </p>
 
     <p>

src/design/demo/theme-content.twig

@@ -1,15 +1,13 @@
 @mixin focus-visible {
-  .js-focus-visible & {
-    &::-moz-focus-inner {
-      border: 0;
-    }
+  &::-moz-focus-inner {
+    border: 0;
+  }
 
-    &:focus {
-      outline: 0;
+  &:focus {
+    outline: 0;
+  }
 
-      &.focus-visible {
-        @content;
-      }
-    }
+  &:focus-visible {
+    @content;
   }
 }