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

Commit 5c8529b

Browse files
committed
Added 'Skip to navigation' link
1 parent 9bf94a2 commit 5c8529b

File tree

5 files changed

+40
-1
lines changed

5 files changed

+40
-1
lines changed

components/Footer.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ class Footer extends Component {
1919
return (
2020
<footer className="footer flexItem-none py-3 bgDarker-1">
2121
<div className="maxW-4 mx-auto px-3 px-4@sm flex@sm flex-wrap">
22-
<nav className="mr-auto@sm" role="navigation">
22+
<nav id="nav" className="mr-auto@sm" role="navigation">
2323
<ul className="listReset lineHeight-44 mb-0 flex@sm flex-wrap items-center">
2424
{ homeLink }
2525
<li className="inlineBlock mr-3">

components/SkipLink.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React, { Component, PropTypes } from 'react'
2+
import { Link } from 'react-router'
3+
4+
5+
class SkipLink extends Component {
6+
7+
render() {
8+
const { to, text } = this.props
9+
10+
return (
11+
<a href={to} className="skipLink hide p-1 bgDarker-1">{ text }</a>
12+
)
13+
}
14+
15+
}
16+
17+
SkipLink.propTypes = {
18+
to: PropTypes.string.isRequired,
19+
text: PropTypes.string.isRequired
20+
}
21+
22+
export default SkipLink

pages/_template.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import suncalc from 'suncalc'
66

77
import Header from 'components/Header'
88
import Footer from 'components/Footer'
9+
import SkipLink from 'components/SkipLink'
910

1011
import 'styles/styles.css'
1112

@@ -37,6 +38,7 @@ class Template extends Component {
3738
return (
3839
<div className={wrapperClasses}>
3940
{ header }
41+
<SkipLink />
4042
<div className="content maxW-4 mx-auto px-2 px-4@sm pb-4">
4143
{children}
4244
</div>

styles/components/_skipLink.css

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/* Skip Link */
2+
3+
.skipLink {
4+
top: 0;
5+
left: 0;
6+
7+
/* Undoing .hide */
8+
&:focus {
9+
clip: initial;
10+
height: auto;
11+
width: auto;
12+
overflow: visible;
13+
}
14+
}

styles/styles.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@
1515
@import './modules/_colors.css';
1616

1717
@import './components/_wrap.css';
18+
@import './components/_skipLink.css';
1819
@import './components/_figure.css';
1920
@import './components/_stickyFooter.css';
2021

0 commit comments

Comments
 (0)