Disable ugly focus

package-lock.json

@@ -19,6 +19,7 @@
         "@next/mdx": "^11.1.0",
         "@svgr/webpack": "^5.5.0",
         "date-fns": "^2.23.0",
+        "focus-visible": "^5.2.0",
         "framer-motion": "^4.1.17",
         "next": "^11.1.0",
         "prism-themes": "^1.8.0",
@@ -6408,6 +6409,11 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
     },
+    "node_modules/focus-visible": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz",
+      "integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ=="
+    },
     "node_modules/foreach": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
@@ -16274,6 +16280,11 @@
         }
       }
     },
+    "focus-visible": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz",
+      "integrity": "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ=="
+    },
     "foreach": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",

package.json

@@ -25,6 +25,7 @@
     "@next/mdx": "^11.1.0",
     "@svgr/webpack": "^5.5.0",
     "date-fns": "^2.23.0",
+    "focus-visible": "^5.2.0",
     "framer-motion": "^4.1.17",
     "next": "^11.1.0",
     "prism-themes": "^1.8.0",
@@ -34,6 +35,8 @@
   },
   "devDependencies": {
     "@types/eslint": "7.28.0",
+    "@types/gh-pages": "^3.2.0",
+    "@types/glob": "^7.1.4",
     "@types/react": "17.0.16",
     "@types/react-dom": "17.0.2",
     "@types/styled-components": "^5.1.12",

pages/_app.tsx

@@ -1,12 +1,28 @@
 import { useEffect } from 'react';
 import type { AppProps } from 'next/app';
 import { ChakraProvider } from '@chakra-ui/react';
+import { Global, css } from '@emotion/react';
 import 'prism-themes/themes/prism-shades-of-purple.css';
+import 'focus-visible/dist/focus-visible';
 import { roadmapTheme } from '../styles/theme';
 import { firePageView } from '../lib/gtag';
 import '../styles/carbon.css';
 import { StickyBanner } from '../components/sticky-banner';
 
+const GlobalStyles = css`
+  /*
+    This will hide the focus indicator if the 
+    element receives focus via the mouse,
+    but it will still show up on keyboard focus.
+  */
+
+  .js-focus-visible :focus:not([data-focus-visible-added]) {
+    outline: none;
+    box-shadow: none;
+  }
+`;
+
+
 function MyApp({ Component, pageProps }: AppProps) {
   useEffect(() => {
     firePageView(window.location.pathname);
@@ -14,6 +30,7 @@ function MyApp({ Component, pageProps }: AppProps) {
 
   return (
     <ChakraProvider theme={roadmapTheme}>
+      <Global styles={GlobalStyles} />
       <StickyBanner />
       <Component {...pageProps} />
     </ChakraProvider>

yarn.lock

@@ -3879,6 +3879,11 @@
   dependencies:
     "tslib" "^1.9.3"
 
+"focus-visible@^5.2.0":
+  "integrity" "sha512-Rwix9pBtC1Nuy5wysTmKy+UjbDJpIfg8eHjw0rjZ1mX4GNLz1Bmd16uDpI3Gk1i70Fgcs8Csg2lPm8HULFg9DQ=="
+  "resolved" "https://registry.npmjs.org/focus-visible/-/focus-visible-5.2.0.tgz"
+  "version" "5.2.0"
+
 "foreach@^2.0.5":
   "integrity" "sha1-C+4AUBiusmDQo6865ljdATbsG5k="
   "resolved" "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz"