fix(a11y) Make Dropdown more accessible

- make it focusable
- allow navigation using arrow keys
- dismiss on escape

Author: tryzniak

src/components/Dropdown/Dropdown.jsx

@@ -7,43 +7,105 @@ export default class Dropdown extends React.Component {
     active: false
   };
 
+  componentDidMount() {
+    document.addEventListener('keyup', this._closeDropdownOnEsc.bind(this), true);
+    document.addEventListener('focus', this._closeDropdownIfFocusLost.bind(this), true);
+    document.addEventListener('click', this._closeDropdownIfFocusLost.bind(this), true);
+  }
+
+  _closeDropdownOnEsc(e) {
+    if (e.key === "Escape" && this.state.active) {
+      this.setState({ active: false}, () => {
+        this.dropdownButton.focus();
+      });
+    }
+  }
+
+  _closeDropdownIfFocusLost(e) {
+    if (this.state.active && !this.dropdown.contains(e.target)) {
+      this.setState({ active: false });
+    }
+  }
+
   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 aria-hidden="true" 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>
                 );
               })
             }
           </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: !this.state.active}, () => {
+      if (this.state.active) {
+        this.links[0].focus();
+      }
+    });
+  }
+
   /**
    * Toggle visibility of dropdown items
    *

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 {

src/components/Navigation/Navigation.jsx

@@ -45,8 +45,8 @@ export default class Navigation extends React.Component {
               <Dropdown
                 className="navigation__languages"
                 items={[
-                  { title: 'English', url: 'https://webpack.js.org/' },
-                  { title: '中文', url: 'https://doc.webpack-china.org/' }
+                  { lang: 'en', title: 'English', url: 'https://webpack.js.org/' },
+                  { lang: 'zh', title: '中文', url: 'https://doc.webpack-china.org/' }
                 ]} />
             )
           }