From 86c4bbd05d8a7ffe021ee1e52e577a1f43a085d2 Mon Sep 17 00:00:00 2001
From: atomiks <cc.glows@gmail.com>
Date: Sat, 3 Mar 2018 17:50:56 +1000
Subject: [PATCH] Add focus-visible polyfill

---
 package-lock.json            | 5 +++++
 package.json                 | 3 ++-
 src/css/components/tags.scss | 6 +++---
 src/js/index.js              | 1 +
 4 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ca46ca7a4..39a3cb13c 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 43d636c1a..82bd3ffef 100644
--- a/package.json
+++ b/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"
   }
 }
diff --git a/src/css/components/tags.scss b/src/css/components/tags.scss
index 96e266674..0a3634a82 100644
--- a/src/css/components/tags.scss
+++ b/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);
       }
     }
diff --git a/src/js/index.js b/src/js/index.js
index 339f7935e..3b0aafbf0 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -1,4 +1,5 @@
 // Deps
+import 'focus-visible'
 import 'normalize.css'
 import 'prismjs'
 import feather from 'feather-icons'