Added 'Skip to navigation' link

Author: kylegach

components/Footer.js

@@ -19,7 +19,7 @@ class Footer extends Component {
     return (
       <footer className="footer flexItem-none py-3 bgDarker-1">
         <div className="maxW-4 mx-auto px-3 px-4@sm flex@sm flex-wrap">
-          <nav className="mr-auto@sm" role="navigation">
+          <nav id="nav" className="mr-auto@sm" role="navigation">
             <ul className="listReset lineHeight-44 mb-0 flex@sm flex-wrap items-center">
               { homeLink }
               <li className="inlineBlock mr-3">

components/SkipLink.js

@@ -0,0 +1,22 @@
+import React, { Component, PropTypes } from 'react'
+import { Link } from 'react-router'
+
+
+class SkipLink extends Component {
+
+  render() {
+    const { to, text } = this.props
+
+    return (
+      <a href={to} className="skipLink hide p-1 bgDarker-1">{ text }</a>
+    )
+  }
+
+}
+
+SkipLink.propTypes = {
+  to: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired
+}
+
+export default SkipLink

pages/_template.js

@@ -6,6 +6,7 @@ import suncalc from 'suncalc'
 
 import Header from 'components/Header'
 import Footer from 'components/Footer'
+import SkipLink from 'components/SkipLink'
 
 import 'styles/styles.css'
 
@@ -37,6 +38,7 @@ class Template extends Component {
     return (
       <div className={wrapperClasses}>
         { header }
+        <SkipLink />
         <div className="content maxW-4 mx-auto px-2 px-4@sm pb-4">
           {children}
         </div>

styles/components/_skipLink.css

@@ -0,0 +1,14 @@
+/* Skip Link */
+
+.skipLink {
+  top: 0;
+  left: 0;
+
+  /* Undoing .hide */
+  &:focus {
+    clip: initial;
+    height: auto;
+    width: auto;
+    overflow: visible;
+  }
+}

styles/styles.css

@@ -15,6 +15,7 @@
 @import './modules/_colors.css';
 
 @import './components/_wrap.css';
+@import './components/_skipLink.css';
 @import './components/_figure.css';
 @import './components/_stickyFooter.css';