Accessibility - Skip to main content link (#355)

.gitignore

@@ -82,3 +82,4 @@ out
 /out_functions/
 
 build/*
+

src/assets/css/nav.css

@@ -1,5 +1,25 @@
 /* NAV */
 /* overide bootstrap mobile nav styles */
+
+/* skip to main link - Accessibility */
+
+#skip-to-main-link {
+  display: block;
+  font-size: 1.3rem;
+  left: 250px;
+  background-color: var(--element-2);
+  padding: 5px 5px;
+  color: var(--element-4);
+  text-decoration: underline;
+  position: absolute;
+  transform: translateY(-450%);
+  z-index: 99;
+}
+
+#skip-to-main-link:focus {
+  transform: translateY(-200%);
+}
+
 /* hamburger menu styles */
 .hamburger {
   position: absolute;

src/components/Nav/Nav.js

@@ -129,6 +129,11 @@ function Nav() {
                 <div className="homeLink">VetsWhoCode</div>
               </a>
             </Link>
+            <Link href="#our_stories">
+              <a id="skip-to-main-link" className="a">
+                Skip to main
+              </a>
+            </Link>
           </div>
           <button
             type="button"

tests/components/__snapshots__/Layout.test.js.snap

@@ -48,6 +48,13 @@ exports[`<Layout /> should render correctly 1`] = `
                 VetsWhoCode
               </div>
             </a>
+            <a
+              class="a"
+              href="/#our_stories"
+              id="skip-to-main-link"
+            >
+              Skip to main
+            </a>
           </div>
           <button
             aria-expanded="false"

tests/components/__snapshots__/Nav.test.js.snap

@@ -41,6 +41,13 @@ exports[`<Nav /> should render correctly 1`] = `
             VetsWhoCode
           </div>
         </a>
+        <a
+          class="a"
+          href="/#our_stories"
+          id="skip-to-main-link"
+        >
+          Skip to main
+        </a>
       </div>
       <button
         aria-expanded="false"