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

Commit

Permalink
Added aria-labelledby attributes to the Teaser & WorkTeaser component…
Browse files Browse the repository at this point in the history
…s for the read & learn more links
  • Loading branch information
kylegach committed Apr 17, 2016
1 parent 646dec0 commit f5e61a7
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 4 deletions.
6 changes: 4 additions & 2 deletions components/Teaser.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,15 +17,17 @@ class Teaser extends Component {
const byline = (date) ? (<Byline date={date} />) : ''
// Create pruned version of the body.
const html = page.data.body
const pathBits = page.path.split('/')
const id = pathBits[pathBits.length - 2]
const blurb = prune(html.replace(/<[^>]*>/g, ''), 200)

return (
// TODO: Replace the flexItem-50 class with something more dynamic (quantity queries?)
<article className={row ? 'flexItem-50 mb-3 mb-0@sm pr-3@sm' : 'mb-3 mb-4@sm'} role="article">
<h3 className="h4 mb-0"><Link to={prefixLink(page.path)} className="camoLink">{title}</Link></h3>
<h3 id={id} className="h4 mb-0"><Link to={prefixLink(page.path)} className="camoLink">{title}</Link></h3>
{byline}
<div className="mt-2">{blurb}</div>
<Link to={prefixLink(page.path)} className="inlineBlock mt-2">Keep reading&hellip;</Link>
<Link to={prefixLink(page.path)} className="inlineBlock mt-2" aria-labelledby={id}>Keep reading&hellip;</Link>
</article>
)
}
Expand Down
6 changes: 4 additions & 2 deletions components/WorkTeaser.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ class WorkTeaser extends Component {
const { page } = this.props

const title = access(page, 'data.title') || page.path
const pathBits = page.path.split('/')
const id = pathBits[pathBits.length - 2]
const blurb = access(page, 'data.blurb') || ''
const figure = access(page, 'data.figure') || ''

Expand All @@ -26,9 +28,9 @@ class WorkTeaser extends Component {
{ Figure }
</div>
<figcaption className="flexItem-33 ml-3@sm mt-1 mt-0@sm">
<h3 className="h4 mb-2"><Link to={prefixLink(page.path)} className="camoLink">{title}</Link></h3>
<h3 id={id} className="h4 mb-2"><Link to={prefixLink(page.path)} className="camoLink">{title}</Link></h3>
<p className="mb-2">{blurb}</p>
<Link to={prefixLink(page.path)} className="inlineBlock">Learn more&hellip;</Link>
<Link to={prefixLink(page.path)} className="inlineBlock" aria-labelledby={id}>Learn more&hellip;</Link>
</figcaption>
</figure>
)
Expand Down

0 comments on commit f5e61a7

Please sign in to comment.