Tab indexes

README.md

@@ -204,6 +204,12 @@ ReactDOM.render(<Menu>
             <th></th>
             <td>corresponding to activeKey</td>
         </tr>
+        <tr>
+            <td>tabIndex</td>
+            <td>String</td>
+            <th></th>
+            <td>the tabindex to assign to allow the user to tab to this item</td>
+        </tr>
     </tbody>
 </table>
 
@@ -244,6 +250,12 @@ ReactDOM.render(<Menu>
             <th>false</th>
             <td>no effect for click or keydown for this item</td>
         </tr>
+        <tr>
+            <td>tabIndex</td>
+            <td>String</td>
+            <th></th>
+            <td>the tabindex to assign to allow the user to tab to this item</td>
+        </tr>
     </tbody>
 </table>
 

src/MenuItem.jsx

@@ -10,6 +10,7 @@ const MenuItem = React.createClass({
     selected: React.PropTypes.bool,
     disabled: React.PropTypes.bool,
     title: React.PropTypes.string,
+    tabIndex: React.PropTypes.string,
     onSelect: React.PropTypes.func,
     onClick: React.PropTypes.func,
     onDeselect: React.PropTypes.func,
@@ -122,6 +123,7 @@ const MenuItem = React.createClass({
       ...props.attribute,
       title: props.title,
       className: classnames(classes),
+      tabIndex: props.tabIndex,
       role: 'menuitem',
       'aria-selected': props.selected,
       'aria-disabled': props.disabled,

src/SubMenu.jsx

@@ -9,6 +9,7 @@ const SubMenu = React.createClass({
     parentMenu: React.PropTypes.object,
     title: React.PropTypes.node,
     onClick: React.PropTypes.func,
+    onFocus: React.PropTypes.func,
     onOpenChange: React.PropTypes.func,
     rootPrefixCls: React.PropTypes.string,
     eventKey: React.PropTypes.string,
@@ -21,6 +22,7 @@ const SubMenu = React.createClass({
     onDeselect: React.PropTypes.func,
     onDestroy: React.PropTypes.func,
     onItemHover: React.PropTypes.func,
+    tabIndex: React.PropTypes.string
   },
 
   mixins: [require('./SubMenuStateMixin')],
@@ -163,6 +165,15 @@ const SubMenu = React.createClass({
   onSubMenuClick(info) {
     this.props.onClick(this.addKeyPath(info));
   },
+
+  onFocus: function onFocus () {
+    if (!this.props.open) {
+      this.triggerOpenChange(true);
+    }
+    else {
+      this.triggerOpenChange(false);
+    }
+  },
 
   onSelect(info) {
     this.props.onSelect(info);
@@ -252,12 +263,16 @@ const SubMenu = React.createClass({
     classes[prefixCls] = true;
     classes[prefixCls + '-' + props.mode] = 1;
     let clickEvents = {};
+    let focusEvents = {};
     let mouseEvents = {};
     let titleMouseEvents = {};
     if (!props.disabled) {
       clickEvents = {
         onClick: this.onClick,
       };
+      focusEvents = {
+        onFocus: this.onFocus,
+      };
       mouseEvents = {
         onMouseLeave: this.onMouseLeave,
         onMouseEnter: this.onSubTreeMouseEnter,
@@ -275,9 +290,11 @@ const SubMenu = React.createClass({
       <li className={classnames(classes)} {...mouseEvents}>
         <div
           style={style}
+          tabIndex={tabIndex}
           className={prefixCls + '-title'}
           {...titleMouseEvents}
           {...clickEvents}
+          {...focusEvents}
           aria-open={props.open}
           aria-owns={this._menuId}
           aria-haspopup="true"