Merge pull request bchiang7#165 from gupta-ji6/css/focus-visible-polyfill

add :focus-visible global styles with polyfill

Author: bchiang7

src/styles/GlobalStyle.js

@@ -25,11 +25,31 @@ const GlobalStyle = createGlobalStyle`
     color: var(--lightest-slate);
   }
 
+  /* Provide basic, default focus styles.*/
   :focus {
     outline: 2px dashed var(--green);
     outline-offset: 3px;
   }
 
+  /*
+    Remove default focus styles for mouse users ONLY if
+    :focus-visible is supported on this platform.
+  */
+  :focus:not(:focus-visible) {
+    outline: none;
+    outline-offset: 0px;
+  }
+
+  /*
+    Optionally: If :focus-visible is supported on this
+    platform, provide enhanced focus styles for keyboard
+    focus.
+  */
+  :focus-visible {
+    outline: 2px dashed var(--green);
+    outline-offset: 3px;
+  }
+
   /* Scrollbar Styles */
   html {
     scrollbar-width: thin;