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

1 files changed, 17 insertions, 2 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>