[fixed] Accessibility issues

closes #2

Author: mzabriskie

examples/basic/app.js

@@ -56,7 +56,7 @@ var App = React.createClass({
             </MenuOption>
 
             <MenuOption disabled={true} onDisabledSelect={this.handleDisabledSelect}>
-              diabled option
+              disabled option
             </MenuOption>
 
           </MenuOptions>

lib/components/Menu.js

@@ -6,6 +6,7 @@ var cloneWithProps = require('react/lib/cloneWithProps');
 var MenuTrigger = require('./MenuTrigger');
 var MenuOptions = require('./MenuOptions');
 var MenuOption = require('./MenuOption');
+var uuid = require('../helpers/uuid');
 var injectCSS = require('../helpers/injectCSS');
 var buildClassName = require('../mixins/buildClassName');
 
@@ -19,8 +20,21 @@ var Menu = module.exports = React.createClass({
 
   mixins: [buildClassName],
 
+  childContextTypes: {
+    id: React.PropTypes.string,
+    active: React.PropTypes.bool
+  },
+
+  getChildContext: function () {
+    return {
+      id: this.state.id,
+      active: this.state.active
+    };
+  },
+
   getInitialState: function(){
     return {
+      id: uuid(),
       active: false,
       selectedIndex: 0,
       horizontalPlacement: 'right', // only 'right' || 'left'
@@ -93,8 +107,9 @@ var Menu = module.exports = React.createClass({
       React.Children.forEach(this.props.children, function(child){
         if (child.type === MenuTrigger.type) {
           trigger = cloneWithProps(child, {
-            onToggleActive: this.handleTriggerToggle,
-            ref: 'trigger'
+            ref: 'trigger',
+            owns: this.state.id,
+            onToggleActive: this.handleTriggerToggle
           });
         }
       }.bind(this));
@@ -103,9 +118,6 @@ var Menu = module.exports = React.createClass({
   },
 
   renderMenuOptions: function() {
-    if (!this.state.active) {
-      return null;
-    }
     var options;
     if(this.verifyTwoChildren()) {
       React.Children.forEach(this.props.children, function(child){
@@ -127,7 +139,6 @@ var Menu = module.exports = React.createClass({
     return (
       <div
         className={this.buildClassName('Menu')}
-        role='menu'
         onKeyDown={this.handleKeys}
         onBlur={this.handleBlur}
       >

lib/components/MenuOption.js

@@ -71,8 +71,9 @@ var MenuOption = module.exports = React.createClass({
         onKeyDown={this.handleKeyDown}
         onMouseOver={this.handleHover}
         className={this.buildName()}
-        role='menuitem'
-        tabIndex='-1'
+        role="menuitem"
+        tabIndex="-1"
+        aria-disabled={this.props.disabled}
       >
         {this.props.children}
       </div>

lib/components/MenuOptions.js

@@ -7,6 +7,11 @@ var buildClassName = require('../mixins/buildClassName');
 
 var MenuOptions = module.exports = React.createClass({
 
+  contextTypes: {
+    id: React.PropTypes.string,
+    active: React.PropTypes.bool
+  },
+
   getInitialState: function() {
     return {activeIndex: 0}
   },
@@ -52,16 +57,11 @@ var MenuOptions = module.exports = React.createClass({
   },
 
   updateFocusIndexBy: function(delta) {
-    // open menu if it's closed, and retry focus
-    if (!this.state.active) {
-      this.selectedIndex = 0;
-      this.setState({active: true}, this.updateFocusIndexBy.bind(this, 0));
-      return
-    }
     var optionNodes = this.getDOMNode().querySelectorAll('.Menu__MenuOption');
     this.normalizeSelectedBy(delta, optionNodes.length);
-    this.setState({activeIndex: this.selectedIndex});
-    optionNodes[this.selectedIndex].focus();
+    this.setState({activeIndex: this.selectedIndex}, function () {
+      optionNodes[this.selectedIndex].focus();
+    });
   },
 
   renderOptions: function() {
@@ -92,6 +92,11 @@ var MenuOptions = module.exports = React.createClass({
   render: function() {
     return (
       <div
+        id={this.context.id}
+        role="menu"
+        tabIndex="-1"
+        aria-expanded={this.context.active}
+        style={{visibility: this.context.active ? 'visible' : 'hidden'}}
         className={this.buildName()}
         onKeyDown={this.handleKeys}
       >

lib/components/MenuTrigger.js

@@ -5,23 +5,14 @@ var buildClassName = require('../mixins/buildClassName');
 
 var MenuTrigger = module.exports = React.createClass({
 
-  getInitialState: function() {
-    return {
-      active: false
-    };
+  contextTypes: {
+    active: React.PropTypes.bool
   },
 
   mixins: [buildClassName],
 
-  notifyParent: function() {
-    if (this.props.onToggleActive)
-      this.props.onToggleActive(this.state.active);
-  },
-
   toggleActive: function() {
-    this.setState({
-      active: !this.state.active
-    }, this.notifyParent);
+    this.props.onToggleActive(!this.context.active);
   },
 
   handleKeyUp: function(e) {
@@ -47,7 +38,10 @@ var MenuTrigger = module.exports = React.createClass({
         onClick={this.handleClick}
         onKeyUp={this.handleKeyUp}
         onKeyDown={this.handleKeyDown}
-        tabIndex='0'
+        tabIndex="0"
+        role="button"
+        aria-owns={this.props.owns}
+        aria-haspopup="true"
       >
         {this.props.children}
       </div>

lib/helpers/uuid.js

@@ -0,0 +1,4 @@
+var count = 0;
+module.exports = function () {
+  return 'react-menu-' + count++;
+};

package.json

@@ -14,7 +14,7 @@
   },
   "scripts": {
     "test": "script/test --browsers Firefox --single-run",
-    "start": "scripts/dev-examples"
+    "start": "script/dev-examples"
   },
   "authors": [
     "Jason Madsen"