diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 10 | ||||
-rw-r--r-- | src/components/Global/PageContainer.vue | 14 | ||||
-rw-r--r-- | src/components/Mixins/SetFocusMixin.js | 12 |
3 files changed, 34 insertions, 2 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index 7e1a1006..0e8d3db4 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -1,7 +1,11 @@ <template> <div> <header id="page-header"> - <a role="link" class="link-skip-nav btn btn-light" href="#main-content"> + <a + class="link-skip-nav btn btn-light" + href="#main-content" + @click="setFocus" + > {{ $t('appHeader.skipToContent') }} </a> @@ -207,6 +211,10 @@ export default { toggleNavigation() { this.$root.$emit('toggle-navigation'); }, + setFocus(event) { + event.preventDefault(); + this.$root.$emit('skip-navigation'); + }, }, }; </script> diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue index e766d38d..c979759b 100644 --- a/src/components/Global/PageContainer.vue +++ b/src/components/Global/PageContainer.vue @@ -5,11 +5,17 @@ </template> <script> +import SetFocusMixin from '@/components/Mixins/SetFocusMixin'; export default { name: 'PageContainer', + mixins: [SetFocusMixin], + created() { + this.$root.$on('skip-navigation', () => { + this.setFocus(this.$el); + }); + }, }; </script> - <style lang="scss" scoped> main { width: 100%; @@ -18,6 +24,12 @@ main { padding-bottom: $spacer * 3; padding-left: $spacer; padding-right: $spacer; + + &:focus-visible { + box-shadow: inset 0 0 0 2px theme-color('primary'); + outline: none; + } + @include media-breakpoint-up($responsive-layout-bp) { padding-left: $spacer * 2; } diff --git a/src/components/Mixins/SetFocusMixin.js b/src/components/Mixins/SetFocusMixin.js new file mode 100644 index 00000000..ae3e8e0f --- /dev/null +++ b/src/components/Mixins/SetFocusMixin.js @@ -0,0 +1,12 @@ +const setFocusMixin = { + methods: { + setFocus(element) { + element.setAttribute('tabindex', '-1'); + element.focus(); + // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk + element.removeAttribute('tabindex'); + }, + }, +}; + +export default setFocusMixin; |