Improve accessibility

src/components/About.js

@@ -27,9 +27,9 @@ export default class About extends Component {
     const classes = `${contentStyle.contentWrapper} ${style.about}`
 
     return (
-      <div className={`${contentStyle.contentWrapper} ${style.about}`} >
+      <div className={`${contentStyle.contentWrapper} ${style.about}`} role="region" aria-label="About me">
-        <Header header={'About Me'} />
+        <Header header={'About Me'} role="heading" aria-level="2"/>
-        <div className={contentStyle.content} dangerouslySetInnerHTML={{ __html: result }}>
+        <div className={contentStyle.content} dangerouslySetInnerHTML={{ __html: result }} role="article">
         </div>
       </div>
     )

src/components/Blog.js

@@ -27,8 +27,8 @@ export default class Blog extends Component {
       return new Date(b.published) - new Date(a.published)
     })
     let postsHTML = posts.map((post) => 
-      <div className={styles.postListItem}>
+      <div className={styles.postListItem} role="listitem">
-        <div className={styles.postHeader}>
+        <div className={styles.postHeader} >
           <a href={post.link} className={styles.postTitle}>{post.title}</a>
           <span className={styles.postDate}>{post.published}</span>
         </div>
@@ -40,10 +40,10 @@ export default class Blog extends Component {
     const classes = `${contentStyle.contentWrapper} ${styles.blog}`
 
     return (
-      <div className={classes} id="blog">
+      <div className={classes} id="blog" role="region" aria-label="Blog posts">
-        <Header header={'Blog'} />
+        <Header header={'Blog'} role="heading" aria-level="2"/>
 
-        <div className={`${contentStyle.content} ${styles.postsList}`}>
+        <div className={`${contentStyle.content} ${styles.postsList}`} role="list">
           {postsHTML}
         </div>
 

src/components/Home.js

@@ -15,32 +15,38 @@ export default class Home extends Component {
 
     const socialLinks = objKeys.map((val) => {
       const link = (
-        <a key={key} href={this.props.config.social[val]}>
+        <li>
-          <i className={`fa fa-${val} fa-3x`} aria-hidden="true" />
+          <a key={key} href={this.props.config.social[val]} role="link">
-          <span className="sr-only">{val}</span>
+            <i className={`fa fa-${val} fa-3x`} aria-hidden="true" />
-        </a>
+            <span className="sr-only">{val}</span>
+          </a>
+        </li>
       )
       key += 1
       return link
     })
 
     socialLinks.push(
-      <a key={key} href={`mailto:${this.props.config.email}`}>
+      <li>
-        <i className="fa fa-envelope-o fa-3x" aria-hidden="true" />
+        <a key={key} href={`mailto:${this.props.config.email}`} role="link">
-        <span className="sr-only">e-mail</span>
+          <i className="fa fa-envelope-o fa-3x" aria-hidden="true" />
-      </a>
+          <span className="sr-only">e-mail</span>
+        </a>
+      </li>
     )
 
     return (
-      <div id={styles.coverPage} className={styles.coverPageFull}>
+      <div id={styles.coverPage} className={styles.coverPageFull} role="region" aria-label="Home page">
         <div id={styles.coverPageContent}>
-          <div>
+          <div role="heading" aria-level="1">
             <h1 id={styles.coverPageName}><Link to="/">{ this.props.config.name }</Link></h1>
           </div>
-          <div className={styles.social}>
+          <div className={styles.social} role="list">
-            {socialLinks}
+            <ul>
+              {socialLinks}
+            </ul>
           </div>
-          <div className={styles.menuLinks}>
+          <div className={styles.menuLinks} role="navigation">
             <ul>
               <li>
                 <a href="#about">
@@ -50,9 +56,6 @@ export default class Home extends Component {
               <li>
                 <span>/ <a href="#blog">Blog</a></span>
               </li>
-              <li>
-                <span>/ <a href="#contact">Contact</a></span>
-              </li>
             </ul>
           </div>
         </div>

src/components/Home.scss

@@ -33,12 +33,18 @@
 
 .social {
   text-align: center;
-  a {
+  ul {
-    color: $white;
+    list-style: none;
-    text-shadow: $black 0px 0px 2px;
+    li {
-    -webkit-font-smoothing: antialiased;
+      display: inline;
-    display: inline-block;
+      a {
-    margin: 10px;
+        color: $white;
+        text-shadow: $black 0px 0px 2px;
+        -webkit-font-smoothing: antialiased;
+        display: inline-block;
+        margin: 10px;
+      }
+    }
   }
 }
 

src/components/Navbar.js

@@ -33,7 +33,7 @@ export default class Navbar extends Component {
     )
 
     return (
-      <div className={styles.navbar}>
+      <div className={styles.navbar} role="navigation">
         <div className={styles.links}>
           <ul>
             <li>

src/components/Post.js

@@ -34,12 +34,12 @@ export default class Post extends Component {
       <div>
         <Navbar config={this.props.config} />
         <div className={contentStyle.contentWrapper}>
-          <Header header={title} />
+          <Header header={title} role="heading" aria-level="2" />
           <div className={contentStyle.content}>
             <div className={styles.postDate}>
               <h3>{date.format('MMMM D, YYYY')}</h3>
             </div>
-            <div className={styles.postContent} dangerouslySetInnerHTML={{ __html: body }}>
+            <div className={styles.postContent} dangerouslySetInnerHTML={{ __html: body }} role="article">
             </div>
           </div>
         </div>

src/components/Wrapper.js

@@ -18,7 +18,7 @@ export default class Wrapper extends Component {
 
   render () {
     return (
-      <div className={` ${styles.centerContent} ${this.props.flex ? styles.flexWrap : ''}` }>
+      <div className={` ${styles.centerContent} ${this.props.flex ? styles.flexWrap : ''}` } role='main'>
         {this.props.children}
       </div>
     )

src/containers/MainContainer.js

@@ -14,9 +14,11 @@ export default class MainContainer extends Component {
     // eslint-disable-next-line no-undef
     if (__isBrowser__) {
       data = window.__INITIAL_DATA__
+      console.log("window:", data)            
       delete window.__INITIAL_DATA__
     } else {
       data = props.staticContext.context
+      console.log("StaticContext:", data)      
     }
     
     this.state = {

src/containers/PostContainer.js

@@ -13,10 +13,12 @@ export default class PostContainer extends Component {
     let data
     // eslint-disable-next-line no-undef
     if (__isBrowser__) {
-      data = window.__INITIAL_DATA__      
+      data = window.__INITIAL_DATA__
+      console.log("window:", data)            
       delete window.__INITIAL_DATA__
     } else {
       data = props.staticContext.context
+      console.log("StaticContext:", data)      
     }
 
     this.state = {

src/utils/serverRender.js

@@ -40,7 +40,7 @@ function renderFullPage (html, head, data, config) {
   const initialData = [data, config]
   return `
     <!DOCTYPE html>  
-    <html>
+    <html lang="en">
       <head>
         <title>${config.title}</title>
           <!-- Google Fonts -->