Skip to content
This repository has been archived by the owner on May 5, 2020. It is now read-only.

Commit

Permalink
Added 'Skip to navigation' link
Browse files Browse the repository at this point in the history
  • Loading branch information
kylegach committed Apr 17, 2016
1 parent 9bf94a2 commit 5c8529b
Show file tree
Hide file tree
Showing 5 changed files with 40 additions and 1 deletion.
2 changes: 1 addition & 1 deletion components/Footer.js
Expand Up @@ -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">
Expand Down
22 changes: 22 additions & 0 deletions 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
2 changes: 2 additions & 0 deletions pages/_template.js
Expand Up @@ -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'

Expand Down Expand Up @@ -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>
Expand Down
14 changes: 14 additions & 0 deletions 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;
}
}
1 change: 1 addition & 0 deletions styles/styles.css
Expand Up @@ -15,6 +15,7 @@
@import './modules/_colors.css';

@import './components/_wrap.css';
@import './components/_skipLink.css';
@import './components/_figure.css';
@import './components/_stickyFooter.css';

Expand Down

0 comments on commit 5c8529b

Please sign in to comment.