Improve accessibility of the nav toggle button

Improve the accessibility for the nav toggle button by adding a border
around the button when it is focussed on.

I've added a custom Tailwind CSS variant to do this using a custom
`focus-visible` variant in tailwind.config.js, and using the
https://www.npmjs.com/package/focus-visible polyfill.

web/themes/custom/opdavies/assets/js/app.js

@@ -1,4 +1,5 @@
 import 'alpinejs'
+import 'focus-visible'
 import 'styles/tailwind.pcss'
 import hljs from 'highlightjs'
 

web/themes/custom/opdavies/package-lock.json

@@ -4109,6 +4109,11 @@
         }
       }
     },
+    "focus-visible": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/focus-visible/-/focus-visible-5.1.0.tgz",
+      "integrity": "sha512-nPer0rjtzdZ7csVIu233P2cUm/ks/4aVSI+5KUkYrYpgA7ujgC3p6J7FtFU+AIMWwnwYQOB/yeiOITxFeYIXiw=="
+    },
     "follow-redirects": {
       "version": "1.11.0",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.11.0.tgz",
@@ -4404,6 +4409,12 @@
       "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==",
       "dev": true
     },
+    "growly": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
+      "integrity": "sha1-8QdIy+dq+WS3yWyTxrzCivEgwIE=",
+      "dev": true
+    },
     "handle-thing": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz",
@@ -5773,6 +5784,27 @@
         }
       }
     },
+    "node-notifier": {
+      "version": "5.4.3",
+      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.4.3.tgz",
+      "integrity": "sha512-M4UBGcs4jeOK9CjTsYwkvH6/MzuUmGCyTW+kCY7uO+1ZVr0+FHGdPdIf5CCLqAaxnRrWidyoQlNkMIIVwbKB8Q==",
+      "dev": true,
+      "requires": {
+        "growly": "^1.3.0",
+        "is-wsl": "^1.1.0",
+        "semver": "^5.5.0",
+        "shellwords": "^0.1.1",
+        "which": "^1.3.0"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        }
+      }
+    },
     "node-releases": {
       "version": "1.1.58",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.58.tgz",
@@ -8101,6 +8133,12 @@
       "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
       "dev": true
     },
+    "shellwords": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/shellwords/-/shellwords-0.1.1.tgz",
+      "integrity": "sha512-vFwSUfQvqybiICwZY5+DAWIPLKsWO31Q91JSKl3UYv+K5c2QRPzn0qzec6QPu1Qc9eHYItiP3NdJqNVqetYAww==",
+      "dev": true
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
@@ -9932,6 +9970,34 @@
         "tapable": "^1.0.0"
       }
     },
+    "webpack-notifier": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/webpack-notifier/-/webpack-notifier-1.8.0.tgz",
+      "integrity": "sha512-I6t76NoPe5DZCCm5geELmDV2wlJ89LbU425uN6T2FG8Ywrrt1ZcUMz6g8yWGNg4pttqTPFQJYUPjWAlzUEQ+cQ==",
+      "dev": true,
+      "requires": {
+        "node-notifier": "^5.1.2",
+        "object-assign": "^4.1.0",
+        "strip-ansi": "^3.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "dev": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        }
+      }
+    },
     "webpack-sources": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",

web/themes/custom/opdavies/package.json

@@ -15,6 +15,10 @@
     "postcss-import": "^12.0.1",
     "postcss-loader": "^3.0.0",
     "postcss-nested": "^4.2.1",
-    "tailwindcss": "^1.4.6"
+    "tailwindcss": "^1.4.6",
+    "webpack-notifier": "^1.8.0"
+  },
+  "dependencies": {
+    "focus-visible": "^5.1.0"
   }
 }

web/themes/custom/opdavies/tailwind.config.js

@@ -1,3 +1,4 @@
+const plugin = require('tailwindcss/plugin')
 const {variants} = require('tailwindcss/defaultConfig')
 const {fontFamily, spacing} = require('tailwindcss/defaultTheme')
 
@@ -44,9 +45,16 @@ module.exports = {
     container: false
   },
   plugins: [
-    // require('tailwindcss-skip-link')()
+    plugin(function({ addVariant, e }) {
+      addVariant('focus-visible', ({ modifySelectors, separator }) => {
+        modifySelectors(({ className }) => {
+          return `.${e(`focus-visible${separator}${className}`)}[data-focus-visible-added]`
+        })
+      })
+    })
   ],
   variants: {
+    borderColor: [...variants.borderColor, 'focus-visible'],
     borderStyle: [...variants.borderStyle, 'hover', 'focus'],
     borderWidth: [...variants.borderWidth, 'hover', 'focus'],
     margin: [...variants.margin, 'first', 'last', 'odd', 'even'],

web/themes/custom/opdavies/templates/layout/page.html.twig

@@ -58,7 +58,7 @@
             </div>
 
             <div class="w-1/4 text-right flex items-center justify-end md:hidden">
-              <button type="button" class="nav-toggle appearance-none text-white hover:text-gray-300 focus:outline-none"
+              <button type="button" class="p-1 appearance-none text-white hover:text-gray-300 focus:outline-none border-2 border-transparent focus-visible:border-white"
                       aria-label="Toggle main menu" @click="isOpen = !isOpen">
                 <svg class="js-hidden fill-current text-inherit w-6 h-6" xmlns="http://www.w3.org/2000/svg"
                      viewBox="0 0 20 20">