From 8026797012a0cbdce357a5c47304134fec9eca73 Mon Sep 17 00:00:00 2001 From: Derick Montague Date: Tue, 16 Feb 2021 09:47:03 -0600 Subject: 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
element so that the user can tab to the first tabbable element in the main content section. Solution: - Use a native 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 Change-Id: I4c2301b02f608eeb376ed2d1bd809f3d5c1bf545 --- src/components/Mixins/SetFocusMixin.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 src/components/Mixins/SetFocusMixin.js (limited to 'src/components/Mixins/SetFocusMixin.js') diff --git a/src/components/Mixins/SetFocusMixin.js b/src/components/Mixins/SetFocusMixin.js new file mode 100644 index 000000000..ae3e8e0f7 --- /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; -- cgit v1.2.3