Add 'Skip to content' accessibility link

snakeUni · Feb 14, 2019 · 15646a1 · 15646a1
1 parent df63318
commit 15646a1
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 5 deletions.
diff --git a/website/package-lock.json b/website/package-lock.json
diff --git a/website/package.json b/website/package.json
@@ -7,6 +7,7 @@
   "dependencies": {
     "@mdx-js/mdx": "^0.16.6",
     "@mdx-js/tag": "^0.15.6",
+    "@reach/skip-nav": "^0.1.2",
     "@tippy.js/react": "^2.0.2",
     "animate.css": "^3.7.0",
     "babel-plugin-styled-components": "^1.10.0",

diff --git a/website/src/components/Layout.js b/website/src/components/Layout.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react'
+import { SkipNavLink, SkipNavContent } from '@reach/skip-nav'
 import { Container } from './Framework'
 import Nav from './Nav'
 import NavButtons from './NavButtons'
@@ -28,18 +29,21 @@ class Layout extends Component {
       <>
         <CSS />
         <SEO pageContext={pageContext} />
+        <SkipNavLink />
         <Main>
           <Header
             openNav={this.openNav}
             isNavOpen={isNavOpen}
             pageIndex={pageContext.frontmatter.index}
           />
           <Nav isOpen={isNavOpen} close={this.closeNav} />
-          <Container>
-            <h2>{pageContext.frontmatter.title}</h2>
-            {children}
-            <NavButtons next={pageContext.frontmatter.index + 1} />
-          </Container>
+          <SkipNavContent>
+            <Container>
+              <h2>{pageContext.frontmatter.title}</h2>
+              {children}
+              <NavButtons next={pageContext.frontmatter.index + 1} />
+            </Container>
+          </SkipNavContent>
           <Footer>© {new Date().getFullYear()} - MIT License</Footer>
         </Main>
       </>

diff --git a/website/src/css/base.js b/website/src/css/base.js
@@ -186,4 +186,20 @@ export default createGlobalStyle`
     border-top: 1px solid rgba(0, 16, 64, 0.15);
     margin-top: 5px;
   }
+
+  [data-reach-skip-link] {
+    position: fixed;
+    z-index: 2;
+    padding: 10px;
+    left: -9999px;
+    background: white;
+    border-radius: 4px;
+    font-weight: bold;
+    font-size: 15px;
+
+    &:focus {
+      left: 5px;
+      top: 5px;
+    }
+  }
 `