Adding tabIndex to clickable buttons

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

@@ -15,7 +15,6 @@ const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onComme
             key={i}
             className="mdl-data-table__cell--non-numeric"
             scope="col"
-            tabIndex="0"
             onClick={() => onHeaderClickHandler({field: header.field})}>
             {header.title}
           </th>
@@ -25,11 +24,11 @@ const Table = ({headers, commenters, onHeaderClickHandler, onRoleChange, onComme
     <tbody>
       {commenters.map((row, i)=> (
         <tr key={i}>
-          <td className="mdl-data-table__cell--non-numeric" tabIndex="0">
+          <td className="mdl-data-table__cell--non-numeric">
             <button onClick={() => {viewUserDetail(row.id);}} className={cn(styles.username, styles.button)}>{row.username}</button>
             <span className={styles.email}>{row.profiles.map(({id}) => id)}</span>
           </td>
-          <td className="mdl-data-table__cell--non-numeric" tabIndex="0">
+          <td className="mdl-data-table__cell--non-numeric">
             {row.created_at}
           </td>
           <td className="mdl-data-table__cell--non-numeric">

client/coral-ui/components/Dropdown.js

@@ -64,11 +64,11 @@ class Dropdown extends React.Component {
   render() {
     return (
       <ClickOutside onClickOutside={this.hideMenu}>
-        <div className={styles.dropdown} onClick={this.handleClick} onKeyDown={this.handleKeyDown} role="button" aria-label="Dropdown" aria-haspopup="true" tabIndex="1">
+        <div className={styles.dropdown} onClick={this.handleClick} onKeyDown={this.handleKeyDown} role="button" aria-label="Dropdown" aria-haspopup="true" tabIndex="0">
           {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" tabIndex="2">
+          <ul className={cn(styles.list, {[styles.listActive] : this.state.isOpen})} role="menubar" aria-hidden="true">
             {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" tabIndex="3">
+  <li className={cn(styles.option, className)} onClick={onClick} role="menuitem" tabIndex="0">
     {label}
   </li>
 );