opdavies/oliverdavies.uk-drupal-old
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

Improve accessibility of the nav toggle button

Browse source 
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.
This commit is contained in:
Oliver Davies 2020-07-23 13:57:38 +01:00
parent 95d4c4a03b
commit fe7142e1f1
5 changed files with 82 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
web/themes/custom/opdavies/assets/js/app.js
View file

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

66
web/themes/custom/opdavies/package-lock.json generated
View file

@ -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",

6
web/themes/custom/opdavies/package.json
View file

@ -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"
}
}

10
web/themes/custom/opdavies/tailwind.config.js
View file

@ -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'],

2
web/themes/custom/opdavies/templates/layout/page.html.twig
View file

@ -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">