From 1a8477b3afd7a0f2c68ecf820cfa17912da76c81 Mon Sep 17 00:00:00 2001
From: Anton Harniakou <anton.harniakou@gmail.com>
Date: Sun, 10 Jun 2018 21:52:25 +0300
Subject: [PATCH] fix(accessibility) Improve accessibility of the site

- increase contrast of text elements
- make ui more screen readable
---
 src/components/Contributors/Contributors.jsx       |  2 +-
 src/components/Navigation/Navigation.jsx           |  5 ++++-
 src/components/NotificationBar/NotificationBar.jsx |  1 +
 src/components/Shield/Shield.jsx                   |  2 +-
 src/components/SplashViz/SplashVizSVG.js           |  4 ++--
 src/styles/markdown.scss                           | 10 +++++-----
 src/styles/partials/_vars.scss                     |  4 ++--
 src/styles/prism-theme.scss                        |  4 ++--
 src/utilities/markdown.js                          | 10 +++++-----
 template.ejs                                       |  2 +-
 10 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/components/Contributors/Contributors.jsx b/src/components/Contributors/Contributors.jsx
index b56a00c73b5e..5c9322238ffc 100644
--- a/src/components/Contributors/Contributors.jsx
+++ b/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>
           ))
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index e9b2862c91f6..d0a99d675209 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/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>
diff --git a/src/components/NotificationBar/NotificationBar.jsx b/src/components/NotificationBar/NotificationBar.jsx
index 18aebc3c6f01..eaf8df554a41 100644
--- a/src/components/NotificationBar/NotificationBar.jsx
+++ b/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
diff --git a/src/components/Shield/Shield.jsx b/src/components/Shield/Shield.jsx
index eb48c70de195..13fef70d8267 100644
--- a/src/components/Shield/Shield.jsx
+++ b/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`
   } />
 );
diff --git a/src/components/SplashViz/SplashVizSVG.js b/src/components/SplashViz/SplashVizSVG.js
index 95e6ba1ad7ea..01a658134eb4 100644
--- a/src/components/SplashViz/SplashVizSVG.js
+++ b/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>
diff --git a/src/styles/markdown.scss b/src/styles/markdown.scss
index fa9cbb444a0d..42d856b0032d 100644
--- a/src/styles/markdown.scss
+++ b/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);
   }
diff --git a/src/styles/partials/_vars.scss b/src/styles/partials/_vars.scss
index 3576a90e1940..8b9950667593 100644
--- a/src/styles/partials/_vars.scss
+++ b/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
diff --git a/src/styles/prism-theme.scss b/src/styles/prism-theme.scss
index 5d0a3df09f07..3d3e975a3074 100644
--- a/src/styles/prism-theme.scss
+++ b/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 {
diff --git a/src/utilities/markdown.js b/src/utilities/markdown.js
index 0a9002685026..db2560794045 100644
--- a/src/utilities/markdown.js
+++ b/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`
     );
   };
 
diff --git a/template.ejs b/template.ejs
index bc771ea4481d..1c8d6151ff5f 100644
--- a/template.ejs
+++ b/template.ejs
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8">
     <title><%= htmlWebpackPlugin.options.context.title %></title>