diff options
author | Derick Montague <derick.montague@ibm.com> | 2019-12-06 10:24:41 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2020-01-23 02:45:10 +0300 |
commit | 75b4832122dee0c7589f91f64736d8c5fb7f8ce8 (patch) | |
tree | cab7edb1e1dd9983bd7d6a7f2c1f56643f00abf9 /src/layouts | |
parent | e080a1a7593e83a49d623ffdd452fd0e1c617889 (diff) | |
download | webui-vue-75b4832122dee0c7589f91f64736d8c5fb7f8ce8.tar.xz |
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
Diffstat (limited to 'src/layouts')
-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> |