Permalink
Browse files

Added aria landmark roles

  • Loading branch information...
kylegach committed Apr 16, 2016
1 parent 9b7d4b0 commit 1e24b97eddc4ad5dd853af0e2c6954823de675e5
Showing with 26 additions and 24 deletions.
  1. +17 −15 components/Footer.js
  2. +2 −2 components/Header.js
  3. +1 −1 components/HeaderBlock/index.js
  4. +1 −1 components/Teaser.js
  5. +1 −1 pages/index.js
  6. +1 −1 pages/work/index.js
  7. +1 −1 pages/writing/index.js
  8. +2 −2 wrappers/md.js
@@ -19,21 +19,23 @@ 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">
<ul className="listReset lineHeight-44 mb-0 flex@sm flex-wrap items-center mr-auto@sm">
{ homeLink }
<li className="inlineBlock mr-3">
<Link to={prefixLink('/work/')}>Work</Link>
</li>
<li className="inlineBlock mr-3">
<Link to={prefixLink('/writing/')}>Writing</Link>
</li>
<li className="inlineBlock mr-3">
<a href={prefixLink('/resume/')}>Résumé</a>
</li>
<li className="inlineBlock mr-3">
<Link to={prefixLink('/colophon/')}>Colophon</Link>
</li>
</ul>
<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">
<Link to={prefixLink('/work/')}>Work</Link>
</li>
<li className="inlineBlock mr-3">
<Link to={prefixLink('/writing/')}>Writing</Link>
</li>
<li className="inlineBlock mr-3">
<a href={prefixLink('/resume/')}>Résumé</a>
</li>
<li className="inlineBlock mr-3">
<Link to={prefixLink('/colophon/')}>Colophon</Link>
</li>
</ul>
</nav>
<ul className="listReset lineHeight-44 mb-0 flex@sm flex-wrap items-center">
<li className="inlineBlock mr-3">
<a href={'mailto:' + config.email}>Email</a>
@@ -38,8 +38,8 @@ class Header extends Component {
}
return (
<header className="header flexItem-none mb-4">
<nav className="fs-5 maxW-4 mx-auto px-3 px-4@sm">
<header className="header flexItem-none mb-4" role="banner">
<nav className="fs-5 maxW-4 mx-auto px-3 px-4@sm" role="navigation">
<h1 className="inline fontSize-inherit"><Link to={prefixLink('/')}>{config.siteTitle}</Link></h1>
{seperator}
{breadcrumbs}
@@ -26,7 +26,7 @@ class HeaderBlock extends Component {
}
return (
<header className={'cf mb-4 relative sectionBlock--' + camelCase(title)}>
<header className={'cf mb-4 relative sectionBlock--' + camelCase(title)} role="banner">
<div className="left@md w-25@md px-2 px-3@sm pl-0@md pr-3@md">
<h1 className="h1 caps lineHeight-3 mb-1">{formattedTitle}</h1>
<RhymesWith />
@@ -21,7 +21,7 @@ class Teaser extends Component {
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'}>
<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>
{byline}
<div className="mt-2">{blurb}</div>
@@ -18,7 +18,7 @@ class Home extends Component {
<HeaderBlock title={config.siteTitle}>
<div dangerouslySetInnerHTML={{ __html: config.header.text }} />
</HeaderBlock>
<main>
<main role="main">
<SectionBlock
title={config.work.title}
@@ -12,7 +12,7 @@ class WorkIndex extends Component {
return (
<DocumentTitle title={`${toTitleCase(route.page.file.dirname)}${config.siteTitle}`}>
<main className="maxW-3 mx-auto">
<main className="maxW-3 mx-auto" role="main">
<h1 className="h1 mb-2">{toTitleCase(route.page.file.dirname)}</h1>
<p className="fs-3 mb-4" dangerouslySetInnerHTML={{ __html: config.work.blurb }} />
<Pages pages={route.pages} folder={route.page.file.dirname} />
@@ -13,7 +13,7 @@ class BlogIndex extends Component {
return (
<DocumentTitle title={`${toTitleCase(route.page.file.dirname)}${config.siteTitle}`}>
<main className="maxW-3 mx-auto">
<main className="maxW-3 mx-auto" role="main">
<h1 className="h1 mb-2">{toTitleCase(route.page.file.dirname)}</h1>
<p className="fs-3 mb-4" dangerouslySetInnerHTML={{ __html: config.writing.blurb }} />
<Pages pages={route.pages} folder={route.page.file.dirname} />
@@ -76,8 +76,8 @@ class MDWrapper extends Component {
return (
<DocumentTitle title={`${title}${config.siteTitle}`}>
<main className="maxW-3 mx-auto">
<article>
<main className="maxW-3 mx-auto" role="main">
<article role="article">
<h1 className="h1 mb-0">{title}</h1>
{ byline }
{ intro }

0 comments on commit 1e24b97

Please sign in to comment.