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

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>