Support change the aria role of menu or menuitem.

Author: 王磊

src/Menu.jsx

@@ -28,6 +28,7 @@ const Menu = createReactClass({
     selectable: PropTypes.bool,
     multiple: PropTypes.bool,
     children: PropTypes.any,
+    role: PropTypes.string,
   },
 
   mixins: [MenuMixin],

src/MenuItem.jsx

@@ -125,12 +125,12 @@ const MenuItem = createReactClass({
       [this.getDisabledClassName()]: props.disabled,
     });
     const attrs = {
-      ...props.attribute,
-      title: props.title,
-      className,
       role: 'menuitem',
       'aria-selected': selected,
       'aria-disabled': props.disabled,
+      ...props.attribute,
+      title: props.title,
+      className,
     };
     let mouseEvent = {};
     if (!props.disabled) {

src/MenuMixin.js

@@ -65,6 +65,7 @@ const MenuMixin = {
     defaultOpenKeys: PropTypes.arrayOf(PropTypes.string),
     openKeys: PropTypes.arrayOf(PropTypes.string),
     children: PropTypes.any,
+    role: PropTypes.string,
   },
 
   getDefaultProps() {
@@ -225,11 +226,12 @@ const MenuMixin = {
       props.className,
       `${props.prefixCls}-${props.mode}`,
     );
+
     const domProps = {
       className,
-      role: 'menu',
-      'aria-activedescendant': '',
+      role: props.role || 'menu',
     };
+
     if (props.id) {
       domProps.id = props.id;
     }

tests/Menu.spec.js

@@ -39,6 +39,27 @@ describe('Menu', () => {
     });
   });
 
+  describe('render role listbox', () => {
+    function createMenu() {
+      return (
+        <Menu
+          className="myMenu"
+          openAnimation="fade"
+          role="listbox"
+        >
+          <MenuItem key="1" attribute={{ role: 'option' }}>1</MenuItem>
+          <MenuItem key="2" attribute={{ role: 'option' }}>2</MenuItem>
+          <MenuItem key="3" attribute={{ role: 'option' }}>3</MenuItem>
+        </Menu>
+      );
+    }
+
+    it(`renders menu correctly`, () => {
+      const wrapper = render(createMenu());
+      expect(renderToJson(wrapper)).toMatchSnapshot();
+    });
+  });
+
 
   it('set activeKey', () => {
     const wrapper = mount(

tests/__snapshots__/Menu.spec.js.snap

@@ -2,7 +2,6 @@
 
 exports[`Menu render renders horizontal menu correctly 1`] = `
 <ul
-  aria-activedescendant=""
   class="rc-menu myMenu rc-menu-root rc-menu-vertical"
   role="menu"
   tabindex="0"
@@ -95,7 +94,6 @@ exports[`Menu render renders horizontal menu correctly 1`] = `
 
 exports[`Menu render renders inline menu correctly 1`] = `
 <ul
-  aria-activedescendant=""
   class="rc-menu myMenu rc-menu-root rc-menu-vertical"
   role="menu"
   tabindex="0"
@@ -188,7 +186,6 @@ exports[`Menu render renders inline menu correctly 1`] = `
 
 exports[`Menu render renders vertical menu correctly 1`] = `
 <ul
-  aria-activedescendant=""
   class="rc-menu myMenu rc-menu-root rc-menu-vertical"
   role="menu"
   tabindex="0"
@@ -278,3 +275,33 @@ exports[`Menu render renders vertical menu correctly 1`] = `
   </li>
 </ul>
 `;
+
+exports[`Menu render role listbox renders menu correctly 1`] = `
+<ul
+  class="rc-menu myMenu rc-menu-root rc-menu-vertical"
+  role="listbox"
+  tabindex="0"
+>
+  <li
+    aria-selected="false"
+    class="rc-menu-item"
+    role="option"
+  >
+    1
+  </li>
+  <li
+    aria-selected="false"
+    class="rc-menu-item"
+    role="option"
+  >
+    2
+  </li>
+  <li
+    aria-selected="false"
+    class="rc-menu-item"
+    role="option"
+  >
+    3
+  </li>
+</ul>
+`;