Merge pull request #17602 from rak-phillip/task/16253-skip-to-main-remaining

Add "Skip to main content" link on remaining pages

Author: rak-phillip

shell/components/templates/home.vue

@@ -62,6 +62,10 @@ export default {
 
 <template>
   <div class="dashboard-root">
+    <a
+      href="#main-content"
+      class="skip-to-content btn role-primary"
+    >{{ t('nav.skipToContent') }}</a>
     <FixedBanner :header="true" />
     <Inactivity />
     <AwsComplianceBanner />
@@ -77,8 +81,10 @@ export default {
       />
 
       <main
+        id="main-content"
         class="main-layout"
         :aria-label="t('layouts.home')"
+        tabindex="-1"
       >
         <router-view
           :key="$route.path"
@@ -142,4 +148,16 @@ export default {
       padding: 0;
     }
   }
+
+  .skip-to-content {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    transform: translateY(-100%);
+
+    &:focus {
+      transform: translate(1rem, 1rem);
+    }
+  }
 </style>

shell/components/templates/plain.vue

@@ -66,6 +66,10 @@ export default {
 
 <template>
   <div class="dashboard-root">
+    <a
+      href="#main-content"
+      class="skip-to-content btn role-primary"
+    >{{ t('nav.skipToContent') }}</a>
     <FixedBanner :header="true" />
     <AwsComplianceBanner />
 
@@ -75,8 +79,10 @@ export default {
     >
       <Header :simple="true" />
       <main
+        id="main-content"
         class="main-layout"
         :aria-label="t('layouts.plain')"
+        tabindex="-1"
       >
         <IndentedPanel class="pt-20">
           <router-view
@@ -147,4 +153,16 @@ export default {
       padding: 0;
     }
   }
+
+  .skip-to-content {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    transform: translateY(-100%);
+
+    &:focus {
+      transform: translate(1rem, 1rem);
+    }
+  }
 </style>

shell/pages/fail-whale.vue

@@ -61,6 +61,10 @@ export default {
 
 <template>
   <div class="dashboard-root">
+    <a
+      href="#main-content"
+      class="skip-to-content btn role-primary"
+    >{{ t('nav.skipToContent') }}</a>
     <FixedBanner :header="true" />
     <PromptModal />
     <div
@@ -73,8 +77,10 @@ export default {
       />
 
       <main
+        id="main-content"
         class="main-layout"
         aria-label="Fail whale layout"
+        tabindex="-1"
       >
         <div
           v-if="error"
@@ -200,4 +206,16 @@ export default {
       padding: 0;
     }
   }
+
+  .skip-to-content {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 9999;
+    transform: translateY(-100%);
+
+    &:focus {
+      transform: translate(1rem, 1rem);
+    }
+  }
 </style>