diff --git a/web/themes/custom/opdavies/assets/js/app.js b/web/themes/custom/opdavies/assets/js/app.js index a8af93a..7bd6bda 100644 --- a/web/themes/custom/opdavies/assets/js/app.js +++ b/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' diff --git a/web/themes/custom/opdavies/package-lock.json b/web/themes/custom/opdavies/package-lock.json index e0087c7..5a0d36d 100644 --- a/web/themes/custom/opdavies/package-lock.json +++ b/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", diff --git a/web/themes/custom/opdavies/package.json b/web/themes/custom/opdavies/package.json index f1803db..3b8eb5c 100644 --- a/web/themes/custom/opdavies/package.json +++ b/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" } } diff --git a/web/themes/custom/opdavies/tailwind.config.js b/web/themes/custom/opdavies/tailwind.config.js index a9aa50a..737d9f3 100644 --- a/web/themes/custom/opdavies/tailwind.config.js +++ b/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'], diff --git a/web/themes/custom/opdavies/templates/layout/page.html.twig b/web/themes/custom/opdavies/templates/layout/page.html.twig index 6d713bc..7da5a55 100644 --- a/web/themes/custom/opdavies/templates/layout/page.html.twig +++ b/web/themes/custom/opdavies/templates/layout/page.html.twig @@ -58,7 +58,7 @@
-