Added aria landmark roles

Author: kylegach

components/Footer.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>

components/Header.js

@@ -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}

components/HeaderBlock/index.js

@@ -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 />

components/Teaser.js

@@ -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>

pages/index.js

@@ -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}

pages/work/index.js

@@ -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} />

pages/writing/index.js

@@ -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} />

wrappers/md.js

@@ -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 }