diff options
Diffstat (limited to 'src/layouts/AppLayout.vue')
| -rw-r--r-- | src/layouts/AppLayout.vue | 25 |
1 files changed, 22 insertions, 3 deletions
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue index dcfb52e7..ab25ea3f 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 @@ export default { 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> |