diff options
author | Derick Montague <derick.montague@ibm.com> | 2021-02-16 18:47:03 +0300 |
---|---|---|
committer | Derick Montague <derick.montague@ibm.com> | 2021-02-17 00:27:55 +0300 |
commit | 8026797012a0cbdce357a5c47304134fec9eca73 (patch) | |
tree | 8b10dc9cb962d56e8b55c36a955d00a137762be9 /tests | |
parent | 2f469b9262e0c847746447948f055692b3436fcc (diff) | |
download | webui-vue-8026797012a0cbdce357a5c47304134fec9eca73.tar.xz |
Fix skip link 404 error on refresh bug
Problem:
When a user uses the skip link anchor to skip the navigation, the
route was being changed to /#main-content. This route does not
exist. If a user were to manually refresh the page, it would
return a 404. This link is critical to meet accessibility
guidelines and is needed by users that navigate with a keyboard.
The challenge is that we need to mirror a full page refresh on all
route changes, so we set focus on the app-header element on each route
change. When we click the skip to navigation link, there should not be
a route change. All we need is to set focus on the <main> element so
that the user can tab to the first tabbable element in the main content
section.
Solution:
- Use a native <a> element with an attached click event handler
- Prevent the default action of adding the hash to the URL
- Create a global mixin to reuse for route changes and skip link
activation
- Emit an event that can be listened for to call the global mixin
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I4c2301b02f608eeb376ed2d1bd809f3d5c1bf545
Diffstat (limited to 'tests')
-rw-r--r-- | tests/unit/__snapshots__/AppHeader.spec.js.snap | 1 |
1 files changed, 0 insertions, 1 deletions
diff --git a/tests/unit/__snapshots__/AppHeader.spec.js.snap b/tests/unit/__snapshots__/AppHeader.spec.js.snap index 3e5c91eb..02d99b16 100644 --- a/tests/unit/__snapshots__/AppHeader.spec.js.snap +++ b/tests/unit/__snapshots__/AppHeader.spec.js.snap @@ -8,7 +8,6 @@ exports[`AppHeader.vue should render correctly 1`] = ` <a class="link-skip-nav btn btn-light" href="#main-content" - role="link" > appHeader.skipToContent |