From 847b3bb7b873d946b9d94e502d7e66b9fcae59ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E7=A3=8A?= <wanglei@wangleis-MacBook-Pro.local>
Date: Tue, 2 Jan 2018 16:22:16 +0800
Subject: [PATCH] Support change the aria role of menu or menuitem.

---
 src/Menu.jsx                          |  1 +
 src/MenuItem.jsx                      |  6 ++---
 src/MenuMixin.js                      |  6 +++--
 tests/Menu.spec.js                    | 21 +++++++++++++++++
 tests/__snapshots__/Menu.spec.js.snap | 33 ++++++++++++++++++++++++---
 5 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/src/Menu.jsx b/src/Menu.jsx
index c68c0073..de1140ee 100644
--- a/src/Menu.jsx
+++ b/src/Menu.jsx
@@ -28,6 +28,7 @@ const Menu = createReactClass({
     selectable: PropTypes.bool,
     multiple: PropTypes.bool,
     children: PropTypes.any,
+    role: PropTypes.string,
   },
 
   mixins: [MenuMixin],
diff --git a/src/MenuItem.jsx b/src/MenuItem.jsx
index d8d64af1..facd2cbc 100644
--- a/src/MenuItem.jsx
+++ b/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) {
diff --git a/src/MenuMixin.js b/src/MenuMixin.js
index f1515871..5bd2289b 100644
--- a/src/MenuMixin.js
+++ b/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;
     }
diff --git a/tests/Menu.spec.js b/tests/Menu.spec.js
index 56687b67..d08b513a 100644
--- a/tests/Menu.spec.js
+++ b/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(
diff --git a/tests/__snapshots__/Menu.spec.js.snap b/tests/__snapshots__/Menu.spec.js.snap
index 6b76277f..10da9161 100644
--- a/tests/__snapshots__/Menu.spec.js.snap
+++ b/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>
+`;