Permalink
Browse files

Added aria-labelledby attributes to the Teaser & WorkTeaser component…

…s for the read & learn more links
  • Loading branch information...
kylegach committed Apr 17, 2016
1 parent 646dec0 commit f5e61a774cf339f30988ad9566a017aecee049b2
Showing with 8 additions and 4 deletions.
  1. +4 −2 components/Teaser.js
  2. +4 −2 components/WorkTeaser.js
@@ -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>
)
}
@@ -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') || ''
@@ -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>
)

0 comments on commit f5e61a7

Please sign in to comment.