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

1 files changed, 9 insertions, 1 deletions

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index 7e1a1006..0e8d3db4 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -1,7 +1,11 @@
 <template>
   <div>
     <header id="page-header">
-      <a role="link" class="link-skip-nav btn btn-light" href="#main-content">
+      <a
+        class="link-skip-nav btn btn-light"
+        href="#main-content"
+        @click="setFocus"
+      >
         {{ $t('appHeader.skipToContent') }}
       </a>
 
@@ -207,6 +211,10 @@ export default {
     toggleNavigation() {
       this.$root.$emit('toggle-navigation');
     },
+    setFocus(event) {
+      event.preventDefault();
+      this.$root.$emit('skip-navigation');
+    },
   },
 };
 </script>