Merge pull request #113 from isaacphysics/feature/skip-to-content

Adds skip to content for keyboard users

Author: jsharkey13

src/app/components/navigation/Header.tsx

@@ -27,6 +27,8 @@ const HeaderComponent = ({user}: HeaderProps) => {
                             </Link>
                         </div>
 
+                        <a href="#main" className="skip-main">Skip to main content</a>
+
                         <div className="header-links ml-auto pr-3 px-md-3 d-flex align-items-center d-print-none">
                             {user &&
                                 (!user.loggedIn ?

src/app/components/navigation/IsaacApp.tsx

@@ -78,7 +78,7 @@ export const IsaacApp = () => {
             <ActiveModal />
             <CookieBanner />
             <EmailVerificationBanner />
-            <main role="main" className="flex-fill content-body">
+            <main id="main" role="main" className="flex-fill content-body">
                 <Switch>
                     {/* Errors; these paths work but aren't really used */}
                     <Route exact path={serverError ? undefined : "/error"} component={ServerError} />

src/scss/header.scss

@@ -69,6 +69,30 @@ header {
   line-height: 1.2;
 }
 
+a.skip-main {
+  left:-999px;
+  position:absolute;
+  top:auto;
+  width:1px;
+  height:1px;
+  overflow:hidden;
+  z-index:-999;
+}
+a.skip-main:focus, a.skip-main:active {
+  color: #000;
+  background-color:#fff;
+  left: 5%;
+  top: 60px;
+  width: 175px;
+  height: auto;
+  overflow: auto;
+  margin: 10px;
+  text-align:center;
+  font-family: $secondary-font-medium;
+  font-size: 1rem;
+  z-index:999;
+}
+
 // NOMENSA header.scss
 // !important used to override bootstraps use of !important :(