Add quicklinks to hardware status page
- Renames SetFocusMixin to JumpLinkMixin to better describe what the
mixin is for: jump links like quick links and skip to main content
- Adds scrollToOffset method to JumpLinkMixin methods to scroll to
selected page elements
- Scroll offset is required to show table header below the nav header
- Setting focus is required for accessibility
Signed-off-by: Dixsie Wolmers <dixsie@ibm.com>
Change-Id: I500a2d70727c5a78aeae4a6193ba22a38e4f0b6f
diff --git a/src/components/Global/PageContainer.vue b/src/components/Global/PageContainer.vue
index c979759..ab4adb6 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 0000000..b038527
--- /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 ae3e8e0..0000000
--- 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;