From c17be2d67d91a66c42485f65795715dac05705c9 Mon Sep 17 00:00:00 2001
From: Anton Harniakou <anton.harniakou@gmail.com>
Date: Mon, 2 Jul 2018 13:30:46 +0300
Subject: [PATCH] fix(a11y) Make Dropdown more accessible

- make it focusable
- allow navigation using arrow keys
- dismiss on escape
---
 src/components/Dropdown/Dropdown.jsx     | 86 +++++++++++++++++++-----
 src/components/Dropdown/Dropdown.scss    | 12 +++-
 src/components/Navigation/Navigation.jsx |  4 +-
 3 files changed, 83 insertions(+), 19 deletions(-)

diff --git a/src/components/Dropdown/Dropdown.jsx b/src/components/Dropdown/Dropdown.jsx
index d453427c36ed..5b56b0e7e0f5 100644
--- a/src/components/Dropdown/Dropdown.jsx
+++ b/src/components/Dropdown/Dropdown.jsx
@@ -6,32 +6,59 @@ export default class Dropdown extends React.Component {
     active: false
   };
 
+  componentDidMount() {
+    document.addEventListener('keyup', (e) => {
+      if (e.key === "Escape" && this.state.active) {
+        this.setState({ active: false}, () => {
+          this.dropdownButton.focus();
+        });
+      }
+    });
+
+    document.addEventListener('focus', e => {
+      if (!this.dropdown.contains(e.target)) {
+        this.setState({ active: false });
+      }
+    }, true);
+  }
+
   render() {
     let { className = '', items = [] } = this.props;
     let activeMod = this.state.active ? "dropdown__list--active" : "";
 
     return (
-      <div
-        tabIndex="0"
+      <nav 
         className={ `dropdown ${className}` }
+        ref={ el => this.dropdown = el }
         onMouseOver={ this._toggle.bind(this, true) }
-        onMouseLeave={ this._toggle.bind(this, false) }>
-        <img
-          className="dropdown__language"
-          alt="select language"
-          src={ LanguageIcon } />
-        {/* Commented out until media breakpoints are in place
-        <span>{ items[0].title }</span> */}
-        <i className="dropdown__arrow" />
-
+        onMouseLeave={ this._toggle.bind(this, false) }
+      >
+        <button
+          ref={ el => this.dropdownButton = el }
+          aria-haspopup="true"
+          aria-expanded={ String(this.state.active) }
+          aria-label="Select language"
+          onClick={ this._handleClick.bind(this) }
+        >
+          <img
+            className="dropdown__language"
+            alt="select language"
+            src={ LanguageIcon } />
+          {/* Commented out until media breakpoints are in place
+          <span>{ items[0].title }</span> */}
+          <i aria-hidden="true" className="dropdown__arrow" />
+        </button>
         <div className={ `dropdown__list ${activeMod}` }>
           <ul>
             {
-              items.map(item => {
+              items.map((item, i) => {
                 return (
                   <li key={ item.title }>
-                    <a href={ item.url }>
-                      <span>{ item.title }</span>
+                    <a 
+                      onKeyDown={this._handleArrowKeys.bind(this, i, items.length - 1)}
+                      ref={ node => this.links ? this.links.push(node) : this.links = [node] } 
+                      href={ item.url }>
+                      <span lang={ item.lang }>{ item.title }</span>
                     </a>
                   </li>
                 );
@@ -39,10 +66,39 @@ export default class Dropdown extends React.Component {
             }
           </ul>
         </div>
-      </div>
+      </nav>
     );
   }
 
+  _handleArrowKeys(currentIndex, lastIndex, e) {
+    if (["ArrowDown", "ArrowUp"].includes(e.key)) {
+      e.preventDefault();
+    }
+
+    let newIndex = currentIndex;
+    if (e.key === "ArrowDown") {
+      newIndex++;
+      if (newIndex > lastIndex) {
+        newIndex = 0;
+      }
+    }
+
+    if (e.key === "ArrowUp") {
+      newIndex--;
+      if (newIndex < 0) {
+        newIndex = lastIndex;
+      }
+    }
+
+    this.links[newIndex].focus();
+  }
+
+  _handleClick(e) {
+    this.setState({active: true}, () => {
+      this.links[0].focus();
+    });
+  }
+
   /**
    * Toggle visibility of dropdown items
    *
diff --git a/src/components/Dropdown/Dropdown.scss b/src/components/Dropdown/Dropdown.scss
index 0cf9c2bc3551..98b52f1ab8db 100644
--- a/src/components/Dropdown/Dropdown.scss
+++ b/src/components/Dropdown/Dropdown.scss
@@ -2,8 +2,16 @@
 
 .dropdown {
   position: relative;
-  color: #fff;
-  cursor: pointer;
+
+  button {
+    cursor: pointer;
+    color: #fff;
+    border: none;
+    background-color: transparent;
+    margin: 0;
+    padding: 0;
+    font-size: inherit;
+  }
 }
 
 .dropdown__language {
diff --git a/src/components/Navigation/Navigation.jsx b/src/components/Navigation/Navigation.jsx
index e9b2862c91f6..15627edb6e6c 100644
--- a/src/components/Navigation/Navigation.jsx
+++ b/src/components/Navigation/Navigation.jsx
@@ -68,8 +68,8 @@ export default class Navigation extends React.Component {
           <Dropdown
             className="navigation__languages"
             items={[
-              { title: 'English', url: 'https://webpack.js.org/' },
-              { title: '中文', url: 'https://webpack.docschina.org/' }
+              { lang: 'en', title: 'English', url: 'https://webpack.js.org/' },
+              { lang: 'zh', title: '中文', url: 'https://webpack.docschina.org/' }
             ]} />
         </Container>