summaryrefslogtreecommitdiff
path: root/src/components/_sila/Mixins/JumpLinkMixin.js
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/_sila/Mixins/JumpLinkMixin.js')
-rw-r--r--src/components/_sila/Mixins/JumpLinkMixin.js27
1 files changed, 27 insertions, 0 deletions
diff --git a/src/components/_sila/Mixins/JumpLinkMixin.js b/src/components/_sila/Mixins/JumpLinkMixin.js
new file mode 100644
index 00000000..b038527b
--- /dev/null
+++ b/src/components/_sila/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;