From 75b4832122dee0c7589f91f64736d8c5fb7f8ce8 Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Fri, 6 Dec 2019 01:24:41 -0600
Subject: 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
---
 src/layouts/AppLayout.vue | 25 ++++++++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

(limited to 'src/layouts/AppLayout.vue')

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>
-- 
cgit v1.2.3

