From 798acaf320d33402db2d4858792614b65dfb8a0d Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 12 Oct 2017 13:18:07 -0300
Subject: [PATCH] Support for Keyboard and Accesibility

---
 client/coral-ui/components/Dropdown.js | 17 ++++++++++++++++-
 client/coral-ui/components/Option.js   |  5 +++--
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/client/coral-ui/components/Dropdown.js b/client/coral-ui/components/Dropdown.js
index 20078e2a7..aa5e73415 100644
--- a/client/coral-ui/components/Dropdown.js
+++ b/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>
diff --git a/client/coral-ui/components/Option.js b/client/coral-ui/components/Option.js
index e52c96e8a..b7132e6b2 100644
--- a/client/coral-ui/components/Option.js
+++ b/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,