@carbon/react 1.36.0-rc.0 → 1.37.0-rc.0

package/lib/components/DataTable/DataTable.d.ts

@@ -99,6 +99,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         [key: string]: unknown;
     }) => {
         ariaLabel: string;
+        ['aria-label']: string;
         isExpanded: boolean;
         onExpand: (e: MouseEvent) => void;
         [key: string]: unknown;
@@ -109,6 +110,7 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         [key: string]: unknown;
     }) => {
         ariaLabel: string;
+        ['aria-label']: string;
         disabled: boolean | undefined;
         isExpanded?: boolean;
         isSelected?: boolean;
@@ -116,6 +118,13 @@ export interface DataTableRenderProps<RowType, ColTypes extends any[]> {
         onExpand: (e: MouseEvent) => void;
         [key: string]: unknown;
     };
+    getExpandedRowProps: (getExpandedRowPropsArgs: {
+        row: DataTableRow<ColTypes>;
+        [key: string]: unknown;
+    }) => {
+        ['id']: string;
+        [key: string]: unknown;
+    };
     getSelectionProps: (getSelectionPropsArgs: {
         onClick?: (e: MouseEvent) => void;
         row: DataTableRow<ColTypes>;
@@ -375,6 +384,8 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         onExpand?: ((e: MouseEvent) => void) | undefined;
     }) => {
         ariaLabel: string;
+        'aria-label': string;
+        'aria-controls': string;
         isExpanded: boolean;
         onExpand: any;
     };
@@ -411,9 +422,24 @@ declare class DataTable<RowType, ColTypes extends any[]> extends React.Component
         onExpand: any;
         isExpanded: boolean | undefined;
         ariaLabel: string;
+        'aria-label': string;
+        'aria-controls': string;
         isSelected: boolean | undefined;
         disabled: boolean | undefined;
     };
+    /**
+     * Get the props associated with an expanded row
+     *
+     * @param {object} config
+     * @param {object} config.row the parent row we want the props for
+     * @returns {object}
+     */
+    getExpandedRowProps: ({ row, ...rest }: {
+        [key: string]: unknown;
+        row: DataTableRow<ColTypes>;
+    }) => {
+        id: string;
+    };
     /**
      * Gets the props associated with selection for a header or a row, where
      * applicable. Most often used to indicate selection status of the table or

package/lib/components/DataTable/DataTable.js

@@ -161,6 +161,10 @@ class DataTable extends React__default["default"].Component {
       return {
         ...rest,
         ariaLabel: t(translationKey),
+        // TODO: remove in v12
+        'aria-label': t(translationKey),
+        // Provide a string of all the expanded row id's, separated by a space.
+        'aria-controls': rowIds.map(id => `expanded-row-${id}`).join(' '),
         isExpanded,
         // Compose the event handlers so we don't overwrite a consumer's `onClick`
         // handler
@@ -215,10 +219,30 @@ class DataTable extends React__default["default"].Component {
         onExpand: events.composeEventHandlers([this.handleOnExpandRow(row.id), onClick]),
         isExpanded: row.isExpanded,
         ariaLabel: t(translationKey),
+        // TODO remove in v12
+        'aria-label': t(translationKey),
+        'aria-controls': `expanded-row-${row.id}`,
         isSelected: row.isSelected,
         disabled: row.disabled
       };
     });
+    /**
+     * Get the props associated with an expanded row
+     *
+     * @param {object} config
+     * @param {object} config.row the parent row we want the props for
+     * @returns {object}
+     */
+    _rollupPluginBabelHelpers.defineProperty(this, "getExpandedRowProps", _ref3 => {
+      let {
+        row,
+        ...rest
+      } = _ref3;
+      return {
+        ...rest,
+        id: `expanded-row-${row.id}`
+      };
+    });
     /**
      * Gets the props associated with selection for a header or a row, where
      * applicable. Most often used to indicate selection status of the table or
@@ -596,6 +620,7 @@ class DataTable extends React__default["default"].Component {
       getHeaderProps: this.getHeaderProps,
       getExpandHeaderProps: this.getExpandHeaderProps,
       getRowProps: this.getRowProps,
+      getExpandedRowProps: this.getExpandedRowProps,
       getSelectionProps: this.getSelectionProps,
       getToolbarProps: this.getToolbarProps,
       getBatchActionProps: this.getBatchActionProps,

package/lib/components/DataTable/TableExpandHeader.d.ts

@@ -8,11 +8,21 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { ReactAttr } from '../../types/common';
 type TableExpandHeaderPropsBase = {
+    /**
+     * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader
+     */
+    ['aria-controls']: string;
+    /**
+     * @deprecated This prop has been deprecated and will be
+     * removed in the next major release of Carbon. Use the
+     * `aria-label` prop instead.
+     */
+    ariaLabel?: string;
     /**
      * Specify the string read by a voice reader when the expand trigger is
      * focused
      */
-    ariaLabel?: string;
+    ['aria-label']: string;
     /**
      * @deprecated The enableExpando prop is being replaced by `enableToggle`
      */
@@ -35,25 +45,37 @@ type TableExpandHeaderPropsBase = {
      */
     onExpand?(event: React.MouseEvent<HTMLButtonElement>): void;
 } & ReactAttr<HTMLTableCellElement>;
-type TableExpandHeaderPropsWithToggle = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'enableToggle' | 'onExpand'> & {
+type TableExpandHeaderPropsWithToggle = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'aria-label' | 'enableToggle' | 'onExpand'> & {
     enableToggle: true;
     ariaLabel: string;
+    ['aria-label']: string;
     onExpand(event: React.MouseEvent<HTMLButtonElement>): void;
 };
-type TableExpandHeaderPropsWithExpando = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'enableExpando' | 'onExpand'> & {
+type TableExpandHeaderPropsWithExpando = Omit<TableExpandHeaderPropsBase, 'ariaLabel' | 'aria-label' | 'enableExpando' | 'onExpand'> & {
     enableExpando: true;
     ariaLabel: string;
+    ['aria-label']: string;
     onExpand(event: React.MouseEvent<HTMLButtonElement>): void;
 };
 export type TableExpandHeaderProps = TableExpandHeaderPropsWithToggle | TableExpandHeaderPropsWithExpando | TableExpandHeaderPropsBase;
 declare const TableExpandHeader: {
-    ({ ariaLabel, className: headerClassName, enableExpando, enableToggle, id, isExpanded, onExpand, expandIconDescription, children, ...rest }: TableExpandHeaderProps): JSX.Element;
+    ({ ["aria-controls"]: ariaControls, ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, className: headerClassName, enableExpando, enableToggle, id, isExpanded, onExpand, expandIconDescription, children, ...rest }: TableExpandHeaderProps): JSX.Element;
     propTypes: {
         /**
+         * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader
+         */
+        "aria-controls": PropTypes.Requireable<string>;
+        /**
+         * Specify the string read by a voice reader when the expand trigger is
+         * focused
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
          * Specify the string read by a voice reader when the expand trigger is
          * focused
          */
-        ariaLabel: PropTypes.Requireable<any>;
+        ariaLabel: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         /**

package/lib/components/DataTable/TableExpandHeader.js

@@ -26,7 +26,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const TableExpandHeader = _ref => {
   let {
-    ariaLabel,
+    ['aria-controls']: ariaControls,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
     className: headerClassName,
     enableExpando,
     enableToggle,
@@ -50,7 +52,9 @@ const TableExpandHeader = _ref => {
     className: `${prefix}--table-expand__button`,
     onClick: onExpand,
     title: expandIconDescription,
-    "aria-label": ariaLabel
+    "aria-label": deprecatedAriaLabel || ariaLabel,
+    "aria-expanded": isExpanded,
+    "aria-controls": ariaControls
   }, /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronRight, {
     className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
@@ -58,10 +62,20 @@ const TableExpandHeader = _ref => {
 };
 TableExpandHeader.propTypes = {
   /**
+   * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandHeader
+   */
+  ['aria-controls']: PropTypes__default["default"].string,
+  /**
+   * Specify the string read by a voice reader when the expand trigger is
+   * focused
+   */
+  ['aria-label']: PropTypes__default["default"].string,
+  /**
+   * Deprecated, please use `aria-label` instead.
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
-  ariaLabel: PropTypes__default["default"].oneOfType([requiredIfGivenPropIsTruthy["default"]('enableExpando', PropTypes__default["default"].string), requiredIfGivenPropIsTruthy["default"]('enableToggle', PropTypes__default["default"].string)]),
+  ariaLabel: PropTypes__default["default"].string,
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
   /**

package/lib/components/DataTable/TableExpandRow.d.ts

@@ -8,11 +8,21 @@ import PropTypes from 'prop-types';
 import { MouseEventHandler, PropsWithChildren } from 'react';
 import { TableRowProps } from './TableRow';
 interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
+    /**
+     * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
+     */
+    ['aria-controls']: string;
+    /**
+     * @deprecated This prop has been deprecated and will be
+     * removed in the next major release of Carbon. Use the
+     * `aria-label` prop instead.
+     */
+    ariaLabel?: string;
     /**
      * Specify the string read by a voice reader when the expand trigger is
      * focused
      */
-    ariaLabel: string;
+    ['aria-label']: string;
     /**
      * The id of the matching th node in the table head. Addresses a11y concerns outlined here: https://www.ibm.com/able/guidelines/ci162/info_and_relationships.html and https://www.w3.org/TR/WCAG20-TECHS/H43
      */
@@ -32,13 +42,24 @@ interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
     onExpand: MouseEventHandler<HTMLButtonElement>;
 }
 declare const TableExpandRow: {
-    ({ ariaLabel, className: rowClassName, children, isExpanded, onExpand, expandIconDescription, isSelected, expandHeader, ...rest }: TableExpandRowProps): JSX.Element;
+    ({ ["aria-controls"]: ariaControls, ["aria-label"]: ariaLabel, ariaLabel: deprecatedAriaLabel, className: rowClassName, children, isExpanded, onExpand, expandIconDescription, isSelected, expandHeader, ...rest }: TableExpandRowProps): JSX.Element;
     propTypes: {
         /**
+         * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
+         * TODO: make this required in v12
+         */
+        "aria-controls": PropTypes.Requireable<string>;
+        /**
+         * Specify the string read by a voice reader when the expand trigger is
+         * focused
+         */
+        "aria-label": PropTypes.Requireable<string>;
+        /**
+         * Deprecated, please use `aria-label` instead.
          * Specify the string read by a voice reader when the expand trigger is
          * focused
          */
-        ariaLabel: PropTypes.Validator<string>;
+        ariaLabel: PropTypes.Requireable<string>;
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         className: PropTypes.Requireable<string>;
         /**

package/lib/components/DataTable/TableExpandRow.js

@@ -25,7 +25,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const TableExpandRow = _ref => {
   let {
-    ariaLabel,
+    ['aria-controls']: ariaControls,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
     className: rowClassName,
     children,
     isExpanded,
@@ -54,7 +56,9 @@ const TableExpandRow = _ref => {
     className: `${prefix}--table-expand__button`,
     onClick: onExpand,
     title: expandIconDescription,
-    "aria-label": ariaLabel
+    "aria-label": deprecatedAriaLabel || ariaLabel,
+    "aria-expanded": isExpanded,
+    "aria-controls": ariaControls
   }, /*#__PURE__*/React__default["default"].createElement(iconsReact.ChevronRight, {
     className: `${prefix}--table-expand__svg`,
     "aria-label": expandIconDescription
@@ -62,10 +66,21 @@ const TableExpandRow = _ref => {
 };
 TableExpandRow.propTypes = {
   /**
+   * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
+   * TODO: make this required in v12
+   */
+  ['aria-controls']: PropTypes__default["default"].string,
+  /**
+   * Specify the string read by a voice reader when the expand trigger is
+   * focused
+   */
+  ['aria-label']: PropTypes__default["default"].string,
+  /**
+   * Deprecated, please use `aria-label` instead.
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
-  ariaLabel: PropTypes__default["default"].string.isRequired,
+  ariaLabel: PropTypes__default["default"].string,
   children: PropTypes__default["default"].node,
   className: PropTypes__default["default"].string,
   /**

package/lib/components/DataTable/TableRow.js

@@ -30,7 +30,7 @@ const TableRow = props => {
     [`${prefix}--data-table--selected`]: props.isSelected
   });
   const cleanProps = {
-    ...omit__default["default"](props, ['ariaLabel', 'onExpand', 'isExpanded', 'isSelected']),
+    ...omit__default["default"](props, ['ariaLabel', 'aria-label', 'aria-controls', 'onExpand', 'isExpanded', 'isSelected']),
     className: className || undefined
   };
   return /*#__PURE__*/React__default["default"].createElement("tr", cleanProps);

package/lib/components/Dropdown/Dropdown.d.ts

@@ -71,7 +71,7 @@ export interface DropdownProps<ItemType> extends Omit<ReactAttr<HTMLDivElement>,
      * given item to a string label. By default, it extracts the `label` field
      * from a given item to serve as the item label in the list.
      */
-    itemToString?(item: ItemType): string;
+    itemToString?(item: ItemType | null): string;
     /**
      * We try to stay as generic as possible here to allow individuals to pass
      * in a collection of whatever kind of data structure they prefer

package/lib/components/Dropdown/Dropdown.js

@@ -32,11 +32,11 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 const getInstanceId = setupGetInstanceId["default"]();
 const {
-  MenuBlur,
-  MenuKeyDownArrowDown,
-  MenuKeyDownArrowUp,
-  MenuKeyDownEscape,
-  ToggleButtonClick
+  ToggleButtonKeyDownArrowDown,
+  ToggleButtonKeyDownArrowUp,
+  ToggleButtonKeyDownHome,
+  ToggleButtonKeyDownEnd,
+  ItemMouseMove
 } = Downshift.useSelect.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -82,7 +82,6 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const [highlightedIndex, setHighlightedIndex] = React.useState();
   const {
     isFluid
   } = React.useContext(FormContext.FormContext);
@@ -90,31 +89,43 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     ...downshiftProps,
     items,
     itemToString,
-    highlightedIndex,
     initialSelectedItem,
     onSelectedItemChange,
-    onStateChange
+    stateReducer,
+    isItemDisabled(item, _index) {
+      const isObject = item !== null && typeof item === 'object';
+      return isObject && 'disabled' in item && item.disabled === true;
+    }
   };
   const {
     current: dropdownInstanceId
   } = React.useRef(getInstanceId());
-  function onStateChange(changes) {
+  function stateReducer(state, actionAndChanges) {
     const {
+      changes,
+      props,
       type
+    } = actionAndChanges;
+    const {
+      highlightedIndex
     } = changes;
     switch (type) {
-      case MenuKeyDownArrowDown:
-      case MenuKeyDownArrowUp:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
-      case MenuBlur:
-      case MenuKeyDownEscape:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
-      case ToggleButtonClick:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
+      case ToggleButtonKeyDownArrowDown:
+      case ToggleButtonKeyDownArrowUp:
+      case ToggleButtonKeyDownHome:
+      case ToggleButtonKeyDownEnd:
+        if (highlightedIndex > -1) {
+          const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
+          props.scrollIntoView(itemArray[highlightedIndex]);
+        }
+        return changes;
+      case ItemMouseMove:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
     }
+    return changes;
   }
 
   // only set selectedItem if the prop is defined. Setting if it is undefined
@@ -128,7 +139,8 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     getLabelProps,
     getMenuProps,
     getItemProps,
-    selectedItem
+    selectedItem,
+    highlightedIndex
   } = Downshift.useSelect(selectProps);
   const inline = type === 'inline';
   const showWarning = !invalid && warn;
@@ -172,14 +184,12 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     let {
       selectedItem
     } = _ref2;
-    setIsFocused(false);
     if (onChange) {
       onChange({
         selectedItem: selectedItem ?? null
       });
     }
   }
-  const menuItemOptionRefs = React.useRef(items.map(_ => /*#__PURE__*/React__default["default"].createRef()));
   const handleFocus = evt => {
     setIsFocused(evt.type === 'focus' ? true : false);
   };
@@ -210,10 +220,6 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
         setIsTyping(true);
       }
       if (isTyping && evt.code === 'Space' || !['ArrowDown', 'ArrowUp', ' ', 'Enter'].includes(evt.key)) {
-        if (evt.code === 'Space') {
-          evt.preventDefault();
-          return;
-        }
         if (currTimer) {
           clearTimeout(currTimer);
         }
@@ -221,7 +227,9 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
           setIsTyping(false);
         }, 3000));
       }
-      toggleButtonProps.onKeyDown(evt);
+      if (toggleButtonProps.onKeyDown) {
+        toggleButtonProps.onKeyDown(evt);
+      }
     }
   };
   const menuProps = getMenuProps();
@@ -250,16 +258,12 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     type: "button"
     // aria-expanded is already being passed through {...toggleButtonProps}
     ,
-    role: "combobox" // eslint-disable-line jsx-a11y/role-has-required-aria-props
-    ,
-    "aria-owns": getMenuProps().id,
-    "aria-controls": getMenuProps().id,
     className: `${prefix}--list-box__field`,
     disabled: disabled,
     "aria-disabled": readOnly ? true : undefined // aria-disabled to remain focusable
     ,
     "aria-describedby": !inline && !invalid && !warn && helper ? helperId : undefined,
-    title: selectedItem && itemToString !== undefined ? itemToString(selectedItem) : label
+    title: selectedItem && itemToString !== undefined ? itemToString(selectedItem) : defaultItemToString(label)
   }, toggleButtonProps, readOnlyEventHandlers, {
     ref: mergedRef
   }), /*#__PURE__*/React__default["default"].createElement("span", {
@@ -269,11 +273,9 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     translateWithId: translateWithId
   })), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen && items.map((item, index$1) => {
     const isObject = item !== null && typeof item === 'object';
-    const disabled = isObject && 'disabled' in item && item.disabled === true;
     const itemProps = getItemProps({
       item,
-      index: index$1,
-      disabled
+      index: index$1
     });
     const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
     return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
@@ -281,9 +283,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       isActive: selectedItem === item,
       isHighlighted: highlightedIndex === index$1,
       title: title,
-      ref: {
-        menuItemOptionRef: menuItemOptionRefs.current[index$1]
-      }
+      disabled: itemProps['aria-disabled']
     }, itemProps), typeof item === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id
     }, item)) : itemToString(item), selectedItem === item && /*#__PURE__*/React__default["default"].createElement(iconsReact.Checkmark, {

package/lib/components/ListBox/ListBoxMenu.d.ts

@@ -6,13 +6,13 @@
  */
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
 type ExcludedAttributes = 'id';
-export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLDivElement>, ExcludedAttributes> {
+export interface ListBoxMenuProps extends Omit<ReactAttr<HTMLUListElement>, ExcludedAttributes> {
     /**
      * Specify a custom `id`
      */
     id: string;
 }
-export type ListBoxMenuComponent = ForwardRefReturn<HTMLDivElement, ListBoxMenuProps>;
+export type ListBoxMenuComponent = ForwardRefReturn<HTMLUListElement, ListBoxMenuProps>;
 /**
  * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
  * class into a single component. It is also being used to validate given

package/lib/components/ListBox/ListBoxMenu.js

@@ -32,7 +32,7 @@ const ListBoxMenu = /*#__PURE__*/React__default["default"].forwardRef(function L
     ...rest
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+  return /*#__PURE__*/React__default["default"].createElement("ul", _rollupPluginBabelHelpers["extends"]({
     ref: ref,
     id: id,
     className: `${prefix}--list-box__menu`,

package/lib/components/ListBox/ListBoxMenuItem.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { ForwardedRef } from 'react';
 import { ForwardRefReturn, ReactAttr } from '../../types/common';
-export interface ListBoxMenuItemProps extends ReactAttr<HTMLDivElement> {
+export interface ListBoxMenuItemProps extends ReactAttr<HTMLLIElement> {
     /**
      * Specify whether the current menu item is "active".
      */
@@ -15,8 +15,12 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLDivElement> {
      * Specify whether the current menu item is "highlighted".
      */
     isHighlighted?: boolean;
+    /**
+     * Specify whether the item should be disabled
+     */
+    disabled?: boolean;
 }
-export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLDivElement> & {
+export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLLIElement> & {
     menuItemOptionRef?: React.Ref<HTMLDivElement>;
 }) | null;
 export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;

package/lib/components/ListBox/ListBoxMenuItem.js

@@ -52,10 +52,9 @@ const ListBoxMenuItem = /*#__PURE__*/React__default["default"].forwardRef(functi
     [`${prefix}--list-box__menu-item--active`]: isActive,
     [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
   });
-  return /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({}, rest, {
+  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, rest, {
     className: className,
-    title: isTruncated ? title : undefined,
-    tabIndex: -1
+    title: isTruncated ? title : undefined
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__menu-item__option`,
     ref: forwardedRef?.menuItemOptionRef || ref
@@ -68,6 +67,10 @@ ListBoxMenuItem.propTypes = {
    * Menu Item
    */
   children: PropTypes__default["default"].node,
+  /**
+   * Specify if the item should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
   /**
    * Specify whether the current menu item is "active".
    */

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -45,6 +45,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
     className: containerClassName,
+    clearSelectionDescription,
+    clearSelectionText,
     compareItems,
     direction,
     disabled,
@@ -332,11 +334,18 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
             setIsFocused(evt.type === 'focus' ? true : false);
           }
         };
+        const clearSelectionContent = selectedItems.length > 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
+          className: `${prefix}--visually-hidden`
+        }, clearSelectionDescription, " ", selectedItems.length, ",", clearSelectionText) : /*#__PURE__*/React__default["default"].createElement("span", {
+          className: `${prefix}--visually-hidden`
+        }, clearSelectionDescription, ": 0");
         return /*#__PURE__*/React__default["default"].createElement("div", {
           className: wrapperClasses
         }, titleText ? /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
           className: titleClasses
-        }, labelProps), titleText) : null, /*#__PURE__*/React__default["default"].createElement(index["default"], {
+        }, labelProps), titleText, /*#__PURE__*/React__default["default"].createElement("span", {
+          className: `${prefix}--visually-hidden`
+        }, clearSelectionContent)) : null, /*#__PURE__*/React__default["default"].createElement(index["default"], {
           onFocus: isFluid ? handleFocus : null,
           onBlur: isFluid ? handleFocus : null,
           className: className,
@@ -397,12 +406,13 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
           compareItems,
           locale
         }).map((item, index$1) => {
+          const isChecked = selectedItem.filter(selected => isEqual__default["default"](selected, item)).length > 0;
           const itemProps = getItemProps({
             item,
-            disabled: item.disabled
+            disabled: item.disabled,
+            ['aria-selected']: isChecked
           });
           const itemText = itemToString(item);
-          const isChecked = selectedItem.filter(selected => isEqual__default["default"](selected, item)).length > 0;
           return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
             key: itemProps.id,
             "aria-label": itemText,
@@ -435,6 +445,14 @@ FilterableMultiSelect.propTypes = {
    * Specify a label to be read by screen readers on the container note.
    */
   ariaLabel: deprecate["default"](PropTypes__default["default"].string, 'ariaLabel / aria-label props are no longer required for FilterableMultiSelect'),
+  /**
+   * Specify the text that should be read for screen readers that describes total items selected
+   */
+  clearSelectionDescription: PropTypes__default["default"].string,
+  /**
+   * Specify the text that should be read for screen readers to clear selection.
+   */
+  clearSelectionText: PropTypes__default["default"].string,
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
@@ -556,7 +574,9 @@ FilterableMultiSelect.defaultProps = {
   locale: 'en',
   sortItems: sorting.defaultSortItems,
   open: false,
-  selectionFeedback: 'top-after-reopen'
+  selectionFeedback: 'top-after-reopen',
+  clearSelectionText: 'To clear selection, press Delete or Backspace,',
+  clearSelectionDescription: 'Total items selected: '
 };
 var FilterableMultiSelect$1 = FilterableMultiSelect;