fix(accessibility) Improve accessibility of the site (#2274)

- increase contrast of text elements
- make ui more screen readable

Author: tryzniak

src/components/Contributors/Contributors.jsx

@@ -14,7 +14,7 @@ export default ({contributors}) => {
             <a key={ contributor }
               className="contributor"
               href={ `https://github.com/${contributor}` }>
-              <img src={ `https://github.com/${contributor}.png?size=90` } />
+              <img alt={ contributor } src={ `https://github.com/${contributor}.png?size=90` } />
               <span className="contributor__name"> {contributor}</span>
             </a>
           ))

src/components/Navigation/Navigation.jsx

@@ -39,14 +39,17 @@ export default class Navigation extends React.Component {
 
           <div className="navigation__search">
             <input
-              type="text"
+              aria-label="Search documentation"
+              type="search"
               className="navigation__search-input"
               placeholder="Search documentation…"
               onBlur={ this._toggleSearch.bind(this) } />
             <button
+              aria-label="Open search"
               className="navigation__search-icon icon-magnifying-glass"
               onClick={ this._toggleSearch.bind(this) } />
             <button
+              aria-label="Close search"
               className="navigation__search-icon icon-cross"
               onClick={ this._toggleSearch.bind(this) } />
           </div>

src/components/NotificationBar/NotificationBar.jsx

@@ -19,6 +19,7 @@ export default class NotificationBar extends React.Component {
           </p>
           { localStorageIsEnabled ?
             <button
+              aria-label="Dismiss"
               className="notification-bar__close icon-cross"
               onClick={ this._close.bind(this) } /> :
             null

src/components/Shield/Shield.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default props => (
-  <img src={
+  <img alt="webpack shield" src={
     `https://img.shields.io/${props.content}.svg?label=${props.label}&style=flat-square&maxAge=3600`
   } />
 );

src/components/SplashViz/SplashVizSVG.js

@@ -45,8 +45,8 @@ module.exports = {
         <g transform="translate(342, 225)" stroke="#7E8C94" stroke-width="4">
             <path d="M499.558824,86.52 C499.558824,86.52 484.852941,81.02 439.908088,109.436667 C394.963235,137.853333 380.992647,164.436667 380.992647,164.436667" stroke-dasharray="7"></path>
             <path d="M499.558824,86.0616667 C499.558824,86.0616667 484.852941,91.5616667 439.908088,63.145 C394.963235,34.7283333 380.992647,8.145 380.992647,8.145" stroke-dasharray="7"></path>
-            <path d="M0.477941176,170.395 C0.477941176,170.395 169.382939,98.895 447.847936,98.895" id="Shape_99_" stroke-dasharray="6"></path>
-            <path d="M0.477941176,72.395 C0.477941176,72.395 169.382939,0.895 447.847936,0.895" id="Shape_99_" stroke-dasharray="6" transform="translate(224.162939, 36.645000) scale(1, -1) translate(-224.162939, -36.645000) "></path>
+            <path d="M0.477941176,170.395 C0.477941176,170.395 169.382939,98.895 447.847936,98.895" stroke-dasharray="6"></path>
+            <path d="M0.477941176,72.395 C0.477941176,72.395 169.382939,0.895 447.847936,0.895" stroke-dasharray="6" transform="translate(224.162939, 36.645000) scale(1, -1) translate(-224.162939, -36.645000) "></path>
         </g>
         <text font-family="'Source Sans Pro', sans-serif" font-size="18" font-weight="600" fill="#86A5BA">
             <tspan x="24.934" y="562">MODULES WITH DEPENDENCIES</tspan>

src/styles/markdown.scss

@@ -99,13 +99,13 @@
     }
 
     &.tip {
-      background-color: #DCF2FD;
-      color: #618ca0;
+      background-color: #eaf8ff;
+      color: #4e7182;
     }
 
     &.warning {
-      background-color: #fbedb7;
-      color: #8c8466;
+      background-color: #fdf5d8;
+      color: #716b53;
     }
 
     &.todo {
@@ -260,7 +260,7 @@
     margin: 0 2px;
     padding: 2px 6px;
     white-space: normal;
-    background-color: transparentize(getColor(fiord), 0.94);
+    background-color: transparentize(getColor(fiord), 0.95);
     border-radius: 3px;
     text-shadow: 0 1px 0 transparentize(getColor(white), 0.4);
   }

src/styles/partials/_vars.scss

@@ -1,12 +1,12 @@
 $colors: (
   malibu: #8DD6F9,
-  denim: #1D78C1,
+  denim: #175d96,
   fiord: #465E69,
   elephant: #2B3A42,
   white: #ffffff,
   concrete: #f2f2f2,
   alto: #dedede,
-  dusty-grey: #999999,
+  dusty-grey: #777676,
   dove-grey: #666666,
   emperor: #535353,
   mine-shaft: #333333

src/styles/prism-theme.scss

@@ -41,7 +41,7 @@ pre[class*="lang-"] {
 .token.prolog,
 .token.doctype,
 .token.cdata {
-  color: #77858c;
+  color: #93a4ad;
 }
 
 .token.punctuation {
@@ -71,7 +71,7 @@ pre[class*="lang-"] {
 .token.regex,
 .token.attr-value,
 .token.important {
-  color: desaturate(#2dd271, 25%)
+  color: desaturate(#2dd271, 23%)
 }
 
 .token.inserted {

src/utilities/markdown.js

@@ -14,11 +14,11 @@ module.exports = function() {
     var id = parsed.id;
 
     return (
-      `<h${level} class="header">` +
-      `<a class="anchor" href="#${id}" id="${id}"></a>` +
-      `<span class="text">${text}</span>` +
-      `<a class="icon-link" href="#${id}"></a>` +
-      `</h${level}>\n`
+      `<h${level} class="header">
+        <a class="anchor" aria-hidden="true" href="#${id}" id="${id}"></a>
+        <span class="text">${text}</span>
+        <a aria-label="${text}" class="icon-link" href="#${id}"></a>
+      </h${level}>\n`
     );
   };
 

template.ejs

@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <title><%= htmlWebpackPlugin.options.context.title %></title>