Support change the aria role of menu or menuitem.

react-component · Jan 2, 2018 · 16f91b3 · 16f91b3
1 parent 5a5d6c8
commit 16f91b3
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 8 deletions.
diff --git 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
@@ -225,11 +225,13 @@ const MenuMixin = {
       props.className,
       `${props.prefixCls}-${props.mode}`,
     );
+
+    const role = props.role || 'menu'
     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
@@ -39,6 +39,27 @@ describe('Menu', () => {
     });
   });
 
+  describe('render role listbox', () => {
+    function createMenu(props) {
+      return (
+        <Menu
+          className="myMenu"
+          openAnimation="fade"
+          role={props.role}
+        >
+          <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({ role: 'listbox' }));
+      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
@@ -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>
+`;