Permalink
Browse files

Added 'Skip to navigation' link

  • Loading branch information...
kylegach committed Apr 17, 2016
1 parent 9bf94a2 commit 5c8529bc0cc50fa15cd15f3a8c8bf562e1deed13
Showing with 40 additions and 1 deletion.
  1. +1 −1 components/Footer.js
  2. +22 −0 components/SkipLink.js
  3. +2 −0 pages/_template.js
  4. +14 −0 styles/components/_skipLink.css
  5. +1 −0 styles/styles.css
@@ -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">
@@ -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
@@ -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>
@@ -0,0 +1,14 @@
/* Skip Link */
.skipLink {
top: 0;
left: 0;
/* Undoing .hide */
&:focus {
clip: initial;
height: auto;
width: auto;
overflow: visible;
}
}
@@ -15,6 +15,7 @@
@import './modules/_colors.css';
@import './components/_wrap.css';
@import './components/_skipLink.css';
@import './components/_figure.css';
@import './components/_stickyFooter.css';

0 comments on commit 5c8529b

Please sign in to comment.