diff options
Diffstat (limited to 'src/components')
-rw-r--r-- | src/components/Global/PageContainer.vue | 4 | ||||
-rw-r--r-- | src/components/Mixins/JumpLinkMixin.js | 27 | ||||
-rw-r--r-- | src/components/Mixins/SetFocusMixin.js | 12 |
3 files changed, 29 insertions, 14 deletions
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue index c979759b..ab4adb63 100644 --- a/src/components/Global/PageContainer.vue +++ b/src/components/Global/PageContainer.vue @@ -5,10 +5,10 @@ </template> <script> -import SetFocusMixin from '@/components/Mixins/SetFocusMixin'; +import JumpLinkMixin from '@/components/Mixins/JumpLinkMixin'; export default { name: 'PageContainer', - mixins: [SetFocusMixin], + mixins: [JumpLinkMixin], created() { this.$root.$on('skip-navigation', () => { this.setFocus(this.$el); diff --git a/src/components/Mixins/JumpLinkMixin.js b/src/components/Mixins/JumpLinkMixin.js new file mode 100644 index 00000000..b038527b --- /dev/null +++ b/src/components/Mixins/JumpLinkMixin.js @@ -0,0 +1,27 @@ +const JumpLinkMixin = { + 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'); + }, + scrollToOffset(event) { + // Select element to scroll to + const ref = event.target.getAttribute('data-ref'); + const element = this.$refs[ref].$el; + + // Set focus and tabindex on selected element + this.setFocus(element); + + // Set scroll offset below header + const offset = element.offsetTop - 50; + window.scroll({ + top: offset, + behavior: 'smooth', + }); + }, + }, +}; + +export default JumpLinkMixin; diff --git a/src/components/Mixins/SetFocusMixin.js b/src/components/Mixins/SetFocusMixin.js deleted file mode 100644 index ae3e8e0f..00000000 --- a/src/components/Mixins/SetFocusMixin.js +++ /dev/null @@ -1,12 +0,0 @@ -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; |