Add focus-visible polyfill

package-lock.json

@@ -3161,6 +3161,11 @@
       "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I=",
       "dev": true
     },
+    "focus-visible": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-4.1.0.tgz",
+      "integrity": "sha512-K+bqYCQOPs5qHFag28o36TyILpqx43Qlq8/YxWdXEOWy3LZmxk8P+dhI5oPzuC28nwwIcerRNwRNiT3Msk0MqA=="
+    },
     "for-in": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",

package.json

@@ -27,6 +27,7 @@
     "prismjs": "^1.11.0"
   },
   "dependencies": {
-    "feather-icons": "^4.7.0"
+    "feather-icons": "^4.7.0",
+    "focus-visible": "^4.1.0"
   }
 }

src/css/components/tags.scss

@@ -15,7 +15,7 @@
     text-transform: uppercase;
     color: #8385aa;
     white-space: nowrap;
-    border: 1px solid lighten(#8385aa, 15);
+    border: 1px solid #c8cbf2;
     border-radius: 2px;
     vertical-align: middle;
     line-height: 2;
@@ -57,7 +57,7 @@
       color: white;
     }
 
-    &:focus {
+    &.focus-visible:focus {
       box-shadow: 0 0 0 0.25rem transparentize(#8385aa, 0.5);
     }
 
@@ -72,7 +72,7 @@
       border-color: #7983ff;
       color: white;
 
-      &:focus {
+      &.focus-visible:focus {
         box-shadow: 0 0 0 0.25rem transparentize(#7983ff, 0.5);
       }
     }

src/js/index.js

@@ -1,4 +1,5 @@
 // Deps
+import 'focus-visible'
 import 'normalize.css'
 import 'prismjs'
 import feather from 'feather-icons'