Add skip navigation link
This is needed because SPAs do not perform a full page load.
- Add watchers to change focus on ApplicationHeader component element.
This is needed because SPAs do not perform a full page load.
- Add styling for skip to content button
Remove setTimeout call the nextTick method is sufficient. The setTimeout
call was used to handle an iOS 7 bug, which is not a device we support.
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: Ia80c4442ee917d50513c5d1aeb22791e8598bee7
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index dcfb52e..ab25ea3 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -1,14 +1,14 @@
<template>
<div>
- <AppHeader />
+ <AppHeader ref="focusTarget" />
<b-container fluid class="page-container">
<b-row no-gutters>
<b-col tag="nav" cols="12" md="3" lg="2">
<AppNavigation />
</b-col>
<b-col cols="12" md="9" lg="10">
- <main id="#main-content">
- <router-view />
+ <main id="main-content">
+ <router-view ref="routerView" />
</main>
</b-col>
</b-row>
@@ -24,6 +24,25 @@
components: {
AppHeader,
AppNavigation
+ },
+ watch: {
+ $route: function() {
+ // $nextTick = DOM updated
+ this.$nextTick(function() {
+ // Get the focusTarget DOM element
+ let focusTarget = this.$refs.focusTarget.$el;
+
+ // Make focustarget programmatically focussable
+ focusTarget.setAttribute("tabindex", "-1");
+
+ // Focus element
+ focusTarget.focus();
+
+ // Remove tabindex from focustarget
+ // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
+ focusTarget.removeAttribute("tabindex");
+ });
+ }
}
};
</script>