Added prop to apply a11y attributes

Author: Eric Olkowski

packages/react-core/src/components/Menu/Menu.tsx

@@ -63,6 +63,8 @@ export interface MenuProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'r
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
+  /** @beta The variant of a non-checkbox menu. Determines whether one or more items can be selected. */
+  selectVariant?: 'single' | 'multi';
 }
 
 export interface MenuState {
@@ -267,6 +269,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
       innerRef,
       isRootMenu,
       activeMenu,
+      selectVariant,
       /* eslint-enable @typescript-eslint/no-unused-vars */
       ...props
     } = this.props;
@@ -287,7 +290,8 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
           onGetMenuHeight,
           flyoutRef: this.state.flyoutRef,
           setFlyoutRef: flyoutRef => this.setState({ flyoutRef }),
-          disableHover: this.state.disableHover
+          disableHover: this.state.disableHover,
+          selectVariant
         }}
       >
         {isRootMenu && (

packages/react-core/src/components/Menu/MenuContext.ts

@@ -15,6 +15,7 @@ export const MenuContext = React.createContext<{
   flyoutRef?: React.Ref<HTMLLIElement>;
   setFlyoutRef?: (ref: React.Ref<HTMLLIElement>) => void;
   disableHover?: boolean;
+  selectVariant?: 'single' | 'multi';
 }>({
   menuId: null,
   parentMenu: null,
@@ -29,7 +30,8 @@ export const MenuContext = React.createContext<{
   onGetMenuHeight: () => null,
   flyoutRef: null,
   setFlyoutRef: () => null,
-  disableHover: false
+  disableHover: false,
+  selectVariant: null
 });
 
 export const MenuItemContext = React.createContext<{

packages/react-core/src/components/Menu/MenuItem.tsx

@@ -114,7 +114,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
     onDrillOut,
     flyoutRef,
     setFlyoutRef,
-    disableHover
+    disableHover,
+    selectVariant
   } = React.useContext(MenuContext);
   let Component = (to ? 'a' : component) as any;
   if (hasCheck && !to) {
@@ -315,7 +316,8 @@ const MenuItemBase: React.FunctionComponent<MenuItemProps> = ({
             className={css(styles.menuItem, getIsSelected() && !hasCheck && styles.modifiers.selected, className)}
             aria-current={getAriaCurrent()}
             {...(!hasCheck && { disabled: isDisabled })}
-            {...(!hasCheck && !flyoutMenu && { role: 'menuitem' })}
+            {...(!hasCheck && !flyoutMenu && { role: selectVariant ? 'option' : 'menuitem' })}
+            {...(!hasCheck && !flyoutMenu && selectVariant && { 'aria-selected': getIsSelected() })}
             ref={innerRef}
             {...(!hasCheck && {
               onClick: (event: any) => {

packages/react-core/src/components/Menu/MenuList.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Menu/menu';
 import { css } from '@patternfly/react-styles';
+import { MenuContext } from './MenuContext';
 
 export interface MenuListProps extends React.HTMLProps<HTMLUListElement> {
   /** Anything that can be rendered inside of menu list */
@@ -13,9 +14,18 @@ export const MenuList: React.FunctionComponent<MenuListProps> = ({
   children = null,
   className,
   ...props
-}: MenuListProps) => (
-  <ul role="menu" className={css(styles.menuList, className)} {...props}>
-    {children}
-  </ul>
-);
+}: MenuListProps) => {
+  const { selectVariant } = React.useContext(MenuContext);
+
+  return (
+    <ul
+      role={selectVariant ? 'listbox' : 'menu'}
+      {...(selectVariant && { 'aria-multiselectable': selectVariant === 'multi' })}
+      className={css(styles.menuList, className)}
+      {...props}
+    >
+      {children}
+    </ul>
+  );
+};
 MenuList.displayName = 'MenuList';

packages/react-core/src/components/Menu/examples/MenuOptionMultiSelect.tsx

@@ -15,7 +15,7 @@ export const MenuOptionMultiSelect: React.FunctionComponent = () => {
   };
 
   return (
-    <Menu onSelect={onSelect} activeItemId={0} selected={selectedItems}>
+    <Menu selectVariant="multi" onSelect={onSelect} activeItemId={0} selected={selectedItems}>
       <MenuContent>
         <MenuList>
           <MenuItem itemId={0}>Option 1</MenuItem>

packages/react-core/src/components/Menu/examples/MenuOptionSingleSelect.tsx

@@ -12,7 +12,7 @@ export const MenuOptionSingleSelect: React.FunctionComponent = () => {
   };
 
   return (
-    <Menu onSelect={onSelect} activeItemId={activeItem} selected={selectedItem}>
+    <Menu selectVariant="single" onSelect={onSelect} activeItemId={activeItem} selected={selectedItem}>
       <MenuContent>
         <MenuList>
           <MenuItem itemId={0}>Option 1</MenuItem>

packages/react-core/src/next/components/Select/Select.tsx

@@ -28,6 +28,8 @@ export interface SelectProps extends MenuProps, OUIAProps {
   innerRef?: React.Ref<HTMLDivElement>;
   /** z-index of the select menu */
   zIndex?: number;
+  /** The variant of a non-checkbox select. Determines whether one or more items can be selected. */
+  selectVariant?: 'single' | 'multi';
 }
 
 const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
@@ -42,6 +44,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   minWidth,
   innerRef,
   zIndex = 9999,
+  selectVariant,
   ...props
 }: SelectProps & OUIAProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();
@@ -91,6 +94,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
 
   const menu = (
     <Menu
+      selectVariant={selectVariant}
       className={css(className)}
       ref={menuRef}
       onSelect={(event, itemId) => onSelect(event, itemId)}

packages/react-core/src/next/components/Select/examples/SelectBasic.tsx

@@ -43,6 +43,7 @@ export const SelectBasic: React.FunctionComponent = () => {
       onSelect={onSelect}
       onOpenChange={isOpen => setIsOpen(isOpen)}
       toggle={toggle}
+      selectVariant="single"
     >
       <SelectList>
         <SelectOption itemId="Option 1">Option 1</SelectOption>

packages/react-core/src/next/components/Select/examples/SelectGrouped.tsx

@@ -43,6 +43,7 @@ export const SelectBasic: React.FunctionComponent = () => {
       onSelect={onSelect}
       onOpenChange={isOpen => setIsOpen(isOpen)}
       toggle={toggle}
+      selectVariant="single"
     >
       <SelectGroup label="Group 1">
         <SelectList>

packages/react-core/src/next/components/Select/examples/SelectMultiTypeahead.tsx

@@ -178,6 +178,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
       onSelect={(ev, selection) => onSelect(selection as string)}
       onOpenChange={() => setIsOpen(false)}
       toggle={toggle}
+      selectVariant="multi"
     >
       <SelectList>
         {selectOptions.map((option, index) => (