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 | |
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
-rw-r--r-- | src/components/AppHeader/AppHeader.vue | 19 | ||||
-rw-r--r-- | src/layouts/AppLayout.vue | 25 |
2 files changed, 39 insertions, 5 deletions
diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue index 8dacd03d..7974f70a 100644 --- a/src/components/AppHeader/AppHeader.vue +++ b/src/components/AppHeader/AppHeader.vue @@ -1,7 +1,9 @@ <template> <div> - <a href="#main-content">Skip to main content</a> - <header> + <a class="link-skip-nav btn btn-light" href="#main-content" + >Skip to content</a + > + <header id="page-header"> <b-navbar toggleable="lg" variant="dark" type="dark"> <b-navbar-nav small> <b-nav-text>BMC System Management</b-nav-text> @@ -91,4 +93,17 @@ export default { .navbar-text { padding: 0; } + +.link-skip-nav { + position: absolute; + top: -60px; + left: 0.5rem; + z-index: 10; + transition: 150ms cubic-bezier(0.4, 0.14, 1, 1); + + &:focus { + top: 0.5rem; + transition-timing-function: cubic-bezier(0, 0, 0.3, 1); + } +} </style> 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> |