Merge pull request #121 from Breeding-Insight/bug/BI-711

[BI-711] Skip to main content for screen reader
Breeding-Insight · Sep 17, 2021 · 0ba43c1 · 0ba43c1
2 parents add6303 + 06f68f3
commit 0ba43c1
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 3 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -18,6 +18,9 @@
 <template>
   <div id="app">
     <div style="position:fixed;top:1px;z-index:9999;left:1px;right:1px;">
+      <header>
+        <a class="skip-link" href="#main">Skip to main content</a>
+      </header>
       <SuccessNotification ref="successNotification" class="is-marginless"></SuccessNotification>
       <ErrorNotification ref="errorNotification" class="is-marginless"></ErrorNotification>
       <InfoNotification ref="infoNotification" class="is-marginless"></InfoNotification>

diff --git a/src/assets/scss/main.scss b/src/assets/scss/main.scss
@@ -525,6 +525,21 @@ div.sentence-input {
 
 }
 
+.skip-link {
+  background: $purple;
+  color: #fff;
+  font-weight: 700;
+  left: 50%;
+  padding: 4px;
+  position: absolute;
+  transform: translateY(-150%);
+  transition: transform 0.3s;
+}
+
+.skip-link:focus {
+  transform: translateY(0%);
+}
+
 .new-form-content {
   @extend .is-full;
   @extend .is-pulled-left;

diff --git a/src/components/layouts/BaseSideBarLayout.vue b/src/components/layouts/BaseSideBarLayout.vue
@@ -77,7 +77,7 @@
       </div>
       <div class="column">
         <div>
-          <main>
+          <main id="main">
             <section class="section p-5">
               <slot name="content"></slot>
             </section>

diff --git a/src/components/layouts/NoSideBarLayout.vue b/src/components/layouts/NoSideBarLayout.vue
@@ -42,7 +42,7 @@
     </header>
     <div class="columns is-marginless">
       <div class="column">
-        <main>
+        <main id="main">
           <section class="section">
             <slot></slot>
           </section>

diff --git a/src/components/layouts/SimpleLayout.vue b/src/components/layouts/SimpleLayout.vue
@@ -17,7 +17,7 @@
 
 <template>
   <div class="is-full-length">
-    <main>
+    <main id="main">
       <section class="section">
         <slot></slot>
       </section>