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
diff --git a/src/components/Mixins/SetFocusMixin.js b/src/components/Mixins/SetFocusMixin.js
new file mode 100644
index 0000000..ae3e8e0
--- /dev/null
+++ b/src/components/Mixins/SetFocusMixin.js
@@ -0,0 +1,12 @@
+const setFocusMixin = {
+ methods: {
+ setFocus(element) {
+ element.setAttribute('tabindex', '-1');
+ element.focus();
+ // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
+ element.removeAttribute('tabindex');
+ },
+ },
+};
+
+export default setFocusMixin;