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

Commit

Permalink
Added JS to focus navigation after clicking skip link
Browse files Browse the repository at this point in the history
  • Loading branch information
kylegach committed Apr 17, 2016
1 parent 5c8529b commit bf4617b
Showing 1 changed file with 14 additions and 1 deletion.
15 changes: 14 additions & 1 deletion components/SkipLink.js
Expand Up @@ -8,10 +8,23 @@ class SkipLink extends Component {
const { to, text } = this.props

return (
<a href={to} className="skipLink hide p-1 bgDarker-1">{ text }</a>
<a href={to} className="skipLink hide p-1 bgDarker-1" onClick={this.setFocus}>{ text }</a>
)
}

setFocus() {
// Functionality from: https://www.bignerdranch.com/blog/web-accessibility-skip-navigation-links/

// Cannot figure out why this won't work. Get error that 'cannot read property props of null'. Hardcoding instead, for now.
// const target = document.getElementById(this.props.to.split('#')[0])
const target = document.getElementById('nav')
target.setAttribute('tabindex', -1)
target.addEventListener('blur', function() {
target.removeAttribute('tabindex')
})
target.focus()
}

}

SkipLink.propTypes = {
Expand Down

0 comments on commit bf4617b

Please sign in to comment.