Support for Keyboard and Accesibility

client/coral-ui/components/Dropdown.js

@@ -14,6 +14,20 @@ class Dropdown extends React.Component {
       isOpen: false
     };
   }
+
+  handleOptionKeyDown = (value, e) => {
+    const code = e.which;
+    
+    // 13 = Return, 32 = Space
+    if ((code === 13) || (code === 32)) {
+      e.preventDefault();
+      this.setValue(value);
+    }
+  }
+
+  handleOptionClick = (value) => {
+    this.setValue(value);
+  }
   
   setValue = (value) => {
     if (this.props.onChange) {
@@ -73,7 +87,8 @@ class Dropdown extends React.Component {
               .map((child) =>
                 React.cloneElement(child, {
                   key: child.props.value,
-                  onClick: () => this.setValue(child.props.value, child.props.label)
+                  onClick: () => this.handleOptionClick(child.props.value),
+                  onKeyDown: (e) => this.handleOptionKeyDown(child.props.value, e)
                 }))}
           </ul>
         </div>

client/coral-ui/components/Option.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import styles from './Option.css';
 import cn from 'classnames';
 
-const Option = ({className, label = '', onClick}) => (
-  <li className={cn(styles.option, className)} onClick={onClick} role="menuitem" tabIndex="0">
+const Option = ({className, label = '', onClick, onKeyDown}) => (
+  <li className={cn(styles.option, className)} onClick={onClick} onKeyDown={onKeyDown} role="menuitem" tabIndex="0">
     {label}
   </li>
 );
@@ -13,6 +13,7 @@ Option.propTypes = {
   className: PropTypes.string,
   label: PropTypes.string,
   onClick: PropTypes.func,
+  onKeyDown: PropTypes.func,
   value: PropTypes.oneOfType([
     PropTypes.number,
     PropTypes.string,