On MenuItem, set the role to none if the role is null or none.

This will remove the implied `listitem` role of the `<li />`.

https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html

Author: cdeutsch

src/MenuItem.jsx

@@ -161,10 +161,13 @@ export class MenuItem extends React.Component {
         role: 'option',
         'aria-selected': props.isSelected,
       };
-    } else if (props.role === null) {
+    } else if (props.role === null || props.role === 'none') {
       // sometimes we want to specify role inside <li/> element
       // <li><a role='menuitem'>Link</a></li> would be a good example
-      delete attrs.role;
+      // in this case the role on <li/> should be "none" to
+      // remove the implied listitem role.
+      // https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-1/menubar-1.html
+      attrs.role = 'none';
     }
     // In case that onClick/onMouseLeave/onMouseEnter is passed down from owner
     const mouseEvent = {

tests/MenuItem.spec.js

@@ -117,12 +117,18 @@ describe('MenuItem', () => {
   });
 
   describe('overwrite default role', () => {
-    it('should set empty role', () => {
+    it('should set role to none if null', () => {
       const wrapper = shallow(<NakedMenuItem role={null}>test</NakedMenuItem>);
 
       expect(wrapper.render()).toMatchSnapshot();
     });
 
+    it('should set role to none if none', () => {
+      const wrapper = shallow(<NakedMenuItem role="none">test</NakedMenuItem>);
+
+      expect(wrapper.render()).toMatchSnapshot();
+    });
+
     it('should set specific role', () => {
       const wrapper = shallow(<NakedMenuItem role="option">test</NakedMenuItem>);
 

tests/__snapshots__/MenuItem.spec.js.snap

@@ -1,8 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MenuItem overwrite default role should set empty role 1`] = `
+exports[`MenuItem overwrite default role should set role to none if none 1`] = `
 <li
   class="undefined-item"
+  role="none"
+>
+  test
+</li>
+`;
+
+exports[`MenuItem overwrite default role should set role to none if null 1`] = `
+<li
+  class="undefined-item"
+  role="none"
 >
   test
 </li>