feat(Dropdown): add support for listbox or menu role (reactstrap#2077)

* feat(Dropdown, DropdownMenu, DropdownToggle): allow Dropdown to have listbox or menu role

Dropdown Menu should allow for listbox or menu roles.  Before this commit, the Dropdown could only have the menu role.  After this commit, a user can add a menuRole property to the Dropdown component which will set a corresponding aria-haspopop property on the DropdownToggle, role property on the DropdownMenu, and role property on the Dropdown Items

* feat(Dropdown, DropdownMenu, DropdownToggle): simplify code and fix bugs

Address all code cleanlieness and backwards compatibility issues brought up in PR

* feat(Dropdown, DropdownContext, DropdownMenu, DropdownItem): refactor and fix a typo

Address all issues mentioned in PR review

Co-authored-by: Kyle Tsang <6854874+kyletsang@users.noreply.github.com>

src/Dropdown.js

@@ -25,6 +25,7 @@ const propTypes = {
   cssModule: PropTypes.object,
   inNavbar: PropTypes.bool,
   setActiveFromChild: PropTypes.bool,
+  menuRole: PropTypes.oneOf(['listbox', 'menu'])
 };
 
 const defaultProps = {
@@ -76,6 +77,7 @@ class Dropdown extends React.Component {
       // Callback that should be called by DropdownMenu to provide a ref to
       // a HTML tag that's used for the DropdownMenu
       onMenuRef: this.handleMenuRef,
+      menuRole: this.props.menuRole
     };
   }
 
@@ -107,12 +109,19 @@ class Dropdown extends React.Component {
     return this._$menuCtrl;
   }
 
+  getItemType() {
+    if(this.context.menuRole === 'listbox') {
+      return 'option'
+    }
+    return 'menuitem'
+  }
+
   getMenuItems() {
     // In a real menu with a child DropdownMenu, `this.getMenu()` should never
     // be null, but it is sometimes null in tests. To mitigate that, we just
     // use `this.getContainer()` as the fallback `menuContainer`.
     const menuContainer = this.getMenu() || this.getContainer();
-    return [].slice.call(menuContainer.querySelectorAll('[role="menuitem"]'));
+    return [].slice.call(menuContainer.querySelectorAll(`[role="${this.getItemType()}"]`));
   }
 
   addEvents() {
@@ -141,7 +150,7 @@ class Dropdown extends React.Component {
   }
 
   handleKeyDown(e) {
-    const isTargetMenuItem = e.target.getAttribute('role') === 'menuitem';
+    const isTargetMenuItem = e.target.getAttribute('role') === 'menuitem' || e.target.getAttribute('role') === 'option';
     const isTargetMenuCtrl = this.getMenuCtrl() === e.target;
     const isTab = keyCodes.tab === e.which;
 
@@ -177,7 +186,7 @@ class Dropdown extends React.Component {
       }
     }
 
-    if (this.props.isOpen && (e.target.getAttribute('role') === 'menuitem')) {
+    if (this.props.isOpen && isTargetMenuItem) {
       if ([keyCodes.tab, keyCodes.esc].indexOf(e.which) > -1) {
         this.toggle(e);
         this.getMenuCtrl().focus();
@@ -245,6 +254,7 @@ class Dropdown extends React.Component {
       active,
       addonType,
       tag,
+      menuRole,
       ...attrs
     } = omit(this.props, ['toggle', 'disabled', 'inNavbar', 'a11y']);
 

src/DropdownItem.js

@@ -31,6 +31,13 @@ class DropdownItem extends React.Component {
     this.getTabIndex = this.getTabIndex.bind(this);
   }
 
+  getRole() {
+    if(this.context.menuRole === 'listbox') {
+      return 'option'
+    }
+    return 'menuitem'
+  }
+
   onClick(e) {
     const { disabled, header, divider, text } = this.props;
     if (disabled || header || divider || text) {
@@ -58,7 +65,7 @@ class DropdownItem extends React.Component {
 
   render() {
     const tabIndex = this.getTabIndex();
-    const role = tabIndex > -1 ? 'menuitem' : undefined;
+    const role = tabIndex > -1 ? this.getRole() : undefined;
     let {
       className,
       cssModule,

src/DropdownMenu.js

@@ -35,6 +35,13 @@ const directionPositionMap = {
 
 class DropdownMenu extends React.Component {
 
+  getRole() {
+    if(this.context.menuRole === 'listbox') {
+      return 'listbox'
+    }
+    return 'menu'
+  }
+
   render() {
     const {
       className,
@@ -92,7 +99,7 @@ class DropdownMenu extends React.Component {
             return (
               <Tag
                 tabIndex="-1"
-                role="menu"
+                role={this.getRole()}
                 ref={handleRef}
                 {...attrs}
                 style={combinedStyle}
@@ -115,7 +122,7 @@ class DropdownMenu extends React.Component {
     return (
       <Tag
         tabIndex="-1"
-        role="menu"
+        role={this.getRole()}
         {...attrs}
         aria-hidden={!this.context.isOpen}
         className={classes}

src/DropdownToggle.js

@@ -21,8 +21,8 @@ const propTypes = {
 };
 
 const defaultProps = {
-  'aria-haspopup': true,
   color: 'secondary',
+  'aria-haspopup': true
 };
 
 class DropdownToggle extends React.Component {
@@ -49,6 +49,10 @@ class DropdownToggle extends React.Component {
     this.context.toggle(e);
   }
 
+  getRole() {
+    return this.context.menuRole || this.props['aria-haspopup'];
+  }
+
   render() {
     const { className, color, cssModule, caret, split, nav, tag, innerRef, ...props } = this.props;
     const ariaLabel = props['aria-label'] || 'Toggle Dropdown';
@@ -87,6 +91,7 @@ class DropdownToggle extends React.Component {
           className={classes}
           onClick={this.onClick}
           aria-expanded={this.context.isOpen}
+          aria-haspopup={this.getRole()}
           children={children}
         />
       );
@@ -102,6 +107,7 @@ class DropdownToggle extends React.Component {
             className={classes}
             onClick={this.onClick}
             aria-expanded={this.context.isOpen}
+            aria-haspopup={this.getRole()}
             children={children}
           />
         )}

src/__tests__/Dropdown.spec.js

@@ -1115,4 +1115,47 @@ describe('Dropdown', () => {
     expect(dropleft.childAt(0).childAt(0).hasClass('dropleft')).toBe(true);
     expect(dropright.childAt(0).childAt(0).hasClass('dropright')).toBe(true);
   });
+
+  describe('menuRole prop', () => {
+
+    it('should set correct roles for children when menuRole is menu', () => {
+      const wrapper = mount(
+        <Dropdown menuRole={'menu'} toggle={toggle}>
+          <DropdownToggle nav caret>
+            Options
+          </DropdownToggle>
+          <DropdownMenu>
+            <DropdownItem active>
+              Test
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      );
+
+      expect(wrapper.props().menuRole).toEqual('menu')
+      expect(wrapper.find('[aria-haspopup="menu"]').length).toEqual(1)
+      expect(wrapper.find('[role="menuitem"]').length).toEqual(1)
+      expect(wrapper.find('[role="menu"]').length).toEqual(1)
+    })
+
+    it('should set correct roles for children when menuRole is menu', () => {
+      const wrapper = mount(
+        <Dropdown menuRole={'listbox'} toggle={toggle}>
+          <DropdownToggle nav caret>
+            Options
+          </DropdownToggle>
+          <DropdownMenu>
+            <DropdownItem active>
+              Test
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      );
+
+      expect(wrapper.props().menuRole).toEqual('listbox')
+      expect(wrapper.find('[aria-haspopup="listbox"]').length).toEqual(1)
+      expect(wrapper.find('[role="option"]').length).toEqual(1)
+      expect(wrapper.find('[role="listbox"]').length).toEqual(1)
+    })
+  })
 });

types/lib/Dropdown.d.ts

@@ -19,6 +19,7 @@ export interface DropdownProps extends React.HTMLAttributes<HTMLElement> {
   cssModule?: CSSModule;
   inNavbar?: boolean;
   setActiveFromChild?: boolean;
+  menuRole?: boolean | string;
 }
 
 export interface UncontrolledDropdownProps extends DropdownProps {