Keyboard accesible

client/coral-admin/src/routes/Community/components/Table.js

@@ -6,13 +6,15 @@ import {Dropdown, Option} from 'coral-ui';
 import capitalize from 'lodash/capitalize';
 
 const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onCommenterStatusChange, viewUserDetail}) => (
-  <table className={`mdl-data-table ${styles.dataTable}`}>
+  <table className={`mdl-data-table ${styles.dataTable}`} tabIndex="-1">
     <thead>
       <tr>
         {headers.map((header, i) =>(
           <th
             key={i}
             className="mdl-data-table__cell--non-numeric"
+            scope="col"
+            tabIndex="0"
             onClick={() => onHeaderClickHandler({field: header.field})}>
             {header.title}
           </th>
@@ -21,12 +23,12 @@ const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onComme
     </thead>
     <tbody>
       {commenters.map((row, i)=> (
-        <tr key={i}>
-          <td className="mdl-data-table__cell--non-numeric">
+        <tr key={i} tabIndex="0">
+          <td className="mdl-data-table__cell--non-numeric" tabIndex="1">
             <button onClick={() => {viewUserDetail(row.id);}} className={styles.button}>{row.username}</button>
             <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
           </td>
-          <td className="mdl-data-table__cell--non-numeric">
+          <td className="mdl-data-table__cell--non-numeric" tabIndex="1">
             {row.created_at}
           </td>
           <td className="mdl-data-table__cell--non-numeric">

client/coral-ui/components/Dropdown.js

@@ -25,12 +25,26 @@ class Dropdown extends React.Component {
     });
   }
 
-  handleClick = () => {
+  toggle = () => {
     this.setState({
       isOpen: !this.state.isOpen
     });
   }
 
+  handleClick = () => {
+    this.toggle();
+  }
+
+  handleKeyDown = (e) => {
+    const code = e.which;
+    
+    // 13 = Return, 32 = Space
+    if ((code === 13) || (code === 32)) {
+      e.preventDefault();
+      this.toggle();
+    }
+  }
+
   hideMenu = () => {
     this.setState({
       isOpen: false
@@ -50,11 +64,11 @@ class Dropdown extends React.Component {
   render() {
     return (
       <ClickOutside onClickOutside={this.hideMenu}>
-        <div className={styles.dropdown} onClick={this.handleClick} role="menu" aria-label="Dropdown">
+        <div className={styles.dropdown} onClick={this.handleClick} onKeyDown={this.handleKeyDown} role="button" aria-label="Dropdown" aria-haspopup="true" tabIndex="1">
           {this.props.icon && <Icon name={this.props.icon} className={styles.icon} />}
           <span className={styles.label}>{this.renderLabel()}</span>
           {this.state.isOpen ? <Icon name="keyboard_arrow_up" className={styles.arrow} /> : <Icon name="keyboard_arrow_down" className={styles.arrow} />}
-          <ul className={cn(styles.list, {[styles.listActive] : this.state.isOpen})} role="menubar" aria-hidden="true">
+          <ul className={cn(styles.list, {[styles.listActive] : this.state.isOpen})} role="menubar" aria-hidden="true" tabIndex="2">
             {React.Children.toArray(this.props.children)
               .map((child) =>
                 React.cloneElement(child, {

client/coral-ui/components/Option.js

@@ -4,7 +4,7 @@ import styles from './Option.css';
 import cn from 'classnames';
 
 const Option = ({className, label = '', onClick}) => (
-  <li className={cn(styles.option, className)} onClick={onClick} role="menuitem">
+  <li className={cn(styles.option, className)} onClick={onClick} role="menuitem" tabIndex="3">
     {label}
   </li>
 );