xref: /openbmc/webui-vue/src/components/Mixins/JumpLinkMixin.js (revision dc6b3cde1a064e55560798a94deaba14247bcae4)
1*dc6b3cdeSDixsie Wolmersconst JumpLinkMixin = {
2*dc6b3cdeSDixsie Wolmers  methods: {
3*dc6b3cdeSDixsie Wolmers    setFocus(element) {
4*dc6b3cdeSDixsie Wolmers      element.setAttribute('tabindex', '-1');
5*dc6b3cdeSDixsie Wolmers      element.focus();
6*dc6b3cdeSDixsie Wolmers      // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
7*dc6b3cdeSDixsie Wolmers      element.removeAttribute('tabindex');
8*dc6b3cdeSDixsie Wolmers    },
9*dc6b3cdeSDixsie Wolmers    scrollToOffset(event) {
10*dc6b3cdeSDixsie Wolmers      // Select element to scroll to
11*dc6b3cdeSDixsie Wolmers      const ref = event.target.getAttribute('data-ref');
12*dc6b3cdeSDixsie Wolmers      const element = this.$refs[ref].$el;
13*dc6b3cdeSDixsie Wolmers
14*dc6b3cdeSDixsie Wolmers      // Set focus and tabindex on selected element
15*dc6b3cdeSDixsie Wolmers      this.setFocus(element);
16*dc6b3cdeSDixsie Wolmers
17*dc6b3cdeSDixsie Wolmers      // Set scroll offset below header
18*dc6b3cdeSDixsie Wolmers      const offset = element.offsetTop - 50;
19*dc6b3cdeSDixsie Wolmers      window.scroll({
20*dc6b3cdeSDixsie Wolmers        top: offset,
21*dc6b3cdeSDixsie Wolmers        behavior: 'smooth',
22*dc6b3cdeSDixsie Wolmers      });
23*dc6b3cdeSDixsie Wolmers    },
24*dc6b3cdeSDixsie Wolmers  },
25*dc6b3cdeSDixsie Wolmers};
26*dc6b3cdeSDixsie Wolmers
27*dc6b3cdeSDixsie Wolmersexport default JumpLinkMixin;
28