a11y

EcutDavid · Jun 16, 2018 · ffeb73c · ffeb73c
1 parent c0f336d
commit ffeb73c
Show file tree

Hide file tree

Showing 16 changed files with 152 additions and 282 deletions.
diff --git a/index.html b/index.html
@@ -24,7 +24,6 @@
       <p class="browserupgrade-en">This site was built for IE10 and above, please upgrade your browser for a better experience.</p>
     </div>
     <![endif]-->
-    <h1>David Guan</h1>
     <div id="app"></div>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

diff --git a/package.json b/package.json
@@ -66,7 +66,6 @@
     "core-js": "^2.0.0",
     "font-awesome": "^4.6.1",
     "foundation-sites": "6.4.2",
-    "html-utilities": "^1.0.3",
     "html-webpack-plugin": "^2.17.0",
     "motion-ui": "^1.2.2",
     "normalize.css": "^4.0.0",

diff --git a/src/components/About.js b/src/components/About.js
@@ -100,41 +100,45 @@ export default class About extends Component {
 
   render() {
     return (
-      <div className="About row" id={ABOUT_ME}>
+      <main className="About row" id={ABOUT_ME}>
         <div className='column small-11 small-centered'>
           <div className='row'>
-            <div className='column small-10 small-centered description-list'>
+            <section className='column small-10 small-centered description-list' aria-label='introduction'>
               {
                 this.mapDescriptionList()
               }
-            </div>
+            </section>
           </div>
           <div className='row'>
             <a
+              aria-label="David's Github profile"
               className='column small-6 medium-3 account-container'
               target='_blank'
               href='https://github.com/EcutDavid'
-              >
+            >
               <i className='fa fa-github' />
               Github
             </a>
             <a
+              aria-label="David's Stack overflow profile"
               className='column small-6 medium-3 account-container'
               target='_blank'
               href='http://stackoverflow.com/users/5076405/david-guan'
-              >
+            >
               <i className='fa fa-stack-overflow' />
               Stack overflow
             </a>
             <a
+              aria-label="David's Medium homepage"
               className='column small-6 medium-3 account-container'
               target='_blank'
               href='https://medium.com/@davidguandev'
-              >
+            >
               <i className='fa fa-medium' />
               Medium
             </a>
             <a
+              aria-label="David's Youtube channel"
               className='column small-6 medium-3 account-container'
               target='_blank'
               href='https://www.youtube.com/channel/UCxSyYbODJF3ULNMoRwxjJbg'
@@ -146,7 +150,7 @@ export default class About extends Component {
           <Works />
           <Articles />
         </div>
-      </div>
+      </main>
     )
   }
 }
diff --git a/src/components/Articles.js b/src/components/Articles.js
@@ -41,14 +41,14 @@ export default class Articles extends Component {
         <div className='content'>
         {
           data.slice(0, showAll ? Number.MAX_VALUE : 5).map((d, i) =>
-            <div className='row' key={i}>
+            <article className='row' key={i} aria-label={`${d.name}, ${getDateDiff(d.date)}`}>
                 <div className='columns small-11 small-centered medium-9 medium-centered large-7 large-centered'>
                   <div className="article">
-                    <a className='link' target='_blank' href={d.url}>{d.name}</a>
+                    <h3><a className='link' target='_blank' href={d.url}>{d.name}</a></h3>
                     <span className='date'>{getDateDiff(d.date)}</span>
                   </div>
                 </div>
-            </div>
+            </article>
           )
         }
         </div>
@@ -58,7 +58,7 @@ export default class Articles extends Component {
             disabled={showAll ? true : false}
             onClick={() => this.toggleShowAll()}
           >
-            More
+            Display more articles
           </button>
         )}
       </div>

diff --git a/src/components/Footer.js b/src/components/Footer.js
@@ -7,32 +7,32 @@ import 'styles/Footer.scss'
 export default class Footer extends Component {
   render() {
     return (
-      <div className="Footer " id={CONTACT_ME}>
+      <footer className="Footer" id={CONTACT_ME}>
         <a
+          aria-label="David's linkedin profile"
           className='footer-link'
           target='_blank'
           href='https://www.linkedin.com/in/david-guan-64b69b110'
         >
           <i className='fa fa-linkedin-square' />
         </a>
         <a
-          className='footer-link'
-          target='_blank'
-          href='https://www.reddit.com/user/DavidGuanDev/'
-        >
-          <i className='fa fa-reddit' />
-        </a>
-        <a
+          aria-label="David's twitter profile"
           className='footer-link'
           target='_blank'
           href='https://twitter.com/davidguandev'
         >
           <i className='fa fa-twitter' />
         </a>
-        <a href="mailto:davidguandev@gmail.com">
+        <br />
+        <a
+          aria-label="Send a email to David"
+          className="mail"
+          href="mailto:davidguandev@gmail.com"
+        >
           davidguandev@gmail.com
         </a>
-      </div>
+      </footer>
     )
   }
 }
diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,31 +1,13 @@
 import React, { Component } from 'react'
-import { pageScrollTopAnimate } from 'html-utilities'
 import renderParticles from '../particles.ts';
 
-import {
-  MY_WORKS,
-  CONTACT_ME
-} from 'constants/domID'
 import 'styles/Header.scss'
 
+// TODO: a navigation bar for mobile devices
 const hasWebGL = !!window.WebGLRenderingContext;
 
 class Header extends Component {
-  constructor() {
-    super()
-    this.onDefocus = this.onDefocus.bind(this)
-  }
-
-  onDefocus(event) {
-    if (!hasWebGL && event.target.className !== this.refs.navMenuBtn.className) {
-      this.refs.navMenuDropdown.style.display = 'none'
-    }
-  }
-
   componentDidMount() {
-    ['onclick', 'click']
-      .forEach(e => document.addEventListener(e, this.onDefocus, false))
-
     hasWebGL && renderParticles('#header');
   }
 
@@ -34,57 +16,10 @@ class Header extends Component {
       .forEach(e => document.removeEventListener(e, this.onDefocus, false))
   }
 
-  onNavMenuBtnClick() {
-    const style = this.refs.navMenuDropdown.style
-    style.display = style.display === 'block' ? 'none' : 'block'
-  }
-
-  onLinkClick(id) {
-    const dom = document.querySelector(`#${id}`)
-    const scrollTimeMS = 500
-    pageScrollTopAnimate(dom.offsetTop, scrollTimeMS)
-  }
-
   render() {
     return (
-      <div className={`Header ${hasWebGL ? '' : 'withoutWebGL'}`} id='header'>
-        {
-          !hasWebGL && (
-            <div>
-              <div className='mask-layer' />
-              <div className='dropdown-area'>
-                <i
-                  aria-hidden={true}
-                  className='nav-menu-btn fa fa-bars'
-                  onClick={this.onNavMenuBtnClick.bind(this)}
-                  ref='navMenuBtn'
-                />
-                <div
-                  className='nav-menu-dropdown'
-                  ref='navMenuDropdown'
-                >
-                  <span onClick={this.onLinkClick.bind(this, MY_WORKS)}>MY WORKS</span>
-                  <span onClick={this.onLinkClick.bind(this, CONTACT_ME)}>CONTACT</span>
-                </div>
-              </div>
-              <div className='avatar-area'>
-                <figure className='avatar' />
-                <h1 className='name'>David Guan</h1>
-                <p className='description'>Software Engineer</p>
-              </div>
-              <div className='nav-bar'>
-                <span onClick={this.onLinkClick.bind(this, MY_WORKS)}>MY WORKS</span>
-                <span onClick={this.onLinkClick.bind(this, CONTACT_ME)}>CONTACT</span>
-              </div>
-            </div>
-          )
-        }
-      </div>
+      <div className={`Header ${hasWebGL ? '' : 'withoutWebGL'}`} id='header' />
     )
   }
 }
-
-Header.defaultProps = {
-}
-
 export default Header
diff --git a/src/components/Work.js b/src/components/Work.js
@@ -19,16 +19,17 @@ export default class Work extends Component {
   }
 
   render() {
-    const { title, picture, description, className, index, isIframe, src, href } = this.props
+    const { title, picture, description, className, index, isIframe, src, pictureAlt } = this.props
     const { pageLoaded } = this.state;
 
     return (
-      <div className={className} style={index === 5 ? { float: 'right' } : {}}>
+      <section
+        aria-label={`Project ${title}`}
+        className={className} style={index === 5 ? { float: 'right' } : {}}
+      >
         {
           !isIframe ?(
-            <a href={href} target='_blank'>
-              <img className='img thumbnail' src={picture} />
-            </a>
+            <img className='img thumbnail' src={picture} alt={pictureAlt} />
           ) : (
             <iframe
               className='img thumbnail'
@@ -39,9 +40,9 @@ export default class Work extends Component {
             />
           )
         }
-        <h5>{ title }</h5>
+        <h3 aria-label={`Project ${title}`}>{ title }</h3>
         { description }
-      </div>
+      </section>
     )
   }
 }
diff --git a/src/components/Works.js b/src/components/Works.js
@@ -9,8 +9,8 @@ export default class Works extends Component {
   constructor() {
     super()
     this.state={
-      showActionButton: true,
-      showAll: false
+      // Just have 5 projects for now, no need for the toggle button.
+      showAll: true
     }
   }
 
@@ -20,13 +20,10 @@ export default class Works extends Component {
     this.setState({
       showAll: !showAll
     });
-    setTimeout(() => {
-      this.setState({showActionButton: false});
-    }, 0);
   }
 
   render() {
-    const { showAll, showActionButton } = this.state
+    const { showAll } = this.state
     return (
       <div id={MY_WORKS}>
         <h2 className='title'>Projects</h2>
@@ -42,7 +39,7 @@ export default class Works extends Component {
             )
           }
         </div>
-        {showActionButton && (
+        {!showAll && (
           <button
             className={`button action-button ${showAll ? 'hide-button' : ''}`}
             disabled={showAll ? true : false}