Supports specifying an alternative role for the menu items (PR #62)

Author: julienw

src/MenuItem.js

@@ -18,7 +18,8 @@ export default class MenuItem extends Component {
         onMouseLeave: PropTypes.func,
         onMouseMove: PropTypes.func,
         preventClose: PropTypes.bool,
-        selected: PropTypes.bool
+        selected: PropTypes.bool,
+        role: PropTypes.string
     };
 
     static defaultProps = {
@@ -32,7 +33,8 @@ export default class MenuItem extends Component {
         onMouseMove: () => null,
         onMouseLeave: () => null,
         preventClose: false,
-        selected: false
+        selected: false,
+        role: 'menuitem'
     };
 
     handleClick = (event) => {
@@ -61,7 +63,8 @@ export default class MenuItem extends Component {
             className,
             disabled,
             divider,
-            selected
+            selected,
+            role
         } = this.props;
 
         const menuItemClassNames = cx(
@@ -78,7 +81,7 @@ export default class MenuItem extends Component {
         return (
             <div
                 {...attributes} className={menuItemClassNames}
-                role='menuitem' tabIndex='-1' aria-disabled={disabled ? 'true' : 'false'}
+                role={role} tabIndex='-1' aria-disabled={disabled ? 'true' : 'false'}
                 aria-orientation={divider ? 'horizontal' : null}
                 ref={(ref) => { this.ref = ref; }}
                 onMouseMove={this.props.onMouseMove} onMouseLeave={this.props.onMouseLeave}

tests/MenuItem.test.js

@@ -18,4 +18,22 @@ describe('MenuItem tests', () => {
         expect(element).toHaveClass(className);
         expect(element).toHaveClass(attributes.className);
     });
+
+    test('exposes the menuitem role by default', () => {
+        render(
+            <MenuItem>Item</MenuItem>
+        );
+
+        const element = screen.getByRole('menuitem');
+        expect(element).toBeInTheDocument();
+    });
+
+    test('makes it possible to change the default role', () => {
+        render(
+            <MenuItem role='menuitemcheckbox' attributes={{ 'aria-checked': 'true' }}>Item</MenuItem>
+        );
+
+        const element = screen.getByRole('menuitemcheckbox');
+        expect(element).toBeChecked();
+    });
 });