@carbon/react 1.36.0 → 1.37.0-rc.0

package/es/components/MultiSelect/FilterableMultiSelect.js

@@ -33,6 +33,8 @@ import { Space, Enter, Delete, Escape, Tab, Home, End } from '../../internal/key
 const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function FilterableMultiSelect(_ref, ref) {
   let {
     className: containerClassName,
+    clearSelectionDescription,
+    clearSelectionText,
     compareItems,
     direction,
     disabled,
@@ -320,11 +322,18 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
             setIsFocused(evt.type === 'focus' ? true : false);
           }
         };
+        const clearSelectionContent = selectedItems.length > 0 ? /*#__PURE__*/React__default.createElement("span", {
+          className: `${prefix}--visually-hidden`
+        }, clearSelectionDescription, " ", selectedItems.length, ",", clearSelectionText) : /*#__PURE__*/React__default.createElement("span", {
+          className: `${prefix}--visually-hidden`
+        }, clearSelectionDescription, ": 0");
         return /*#__PURE__*/React__default.createElement("div", {
           className: wrapperClasses
         }, titleText ? /*#__PURE__*/React__default.createElement("label", _extends({
           className: titleClasses
-        }, labelProps), titleText) : null, /*#__PURE__*/React__default.createElement(ListBox, {
+        }, labelProps), titleText, /*#__PURE__*/React__default.createElement("span", {
+          className: `${prefix}--visually-hidden`
+        }, clearSelectionContent)) : null, /*#__PURE__*/React__default.createElement(ListBox, {
           onFocus: isFluid ? handleFocus : null,
           onBlur: isFluid ? handleFocus : null,
           className: className,
@@ -385,12 +394,13 @@ const FilterableMultiSelect = /*#__PURE__*/React__default.forwardRef(function Fi
           compareItems,
           locale
         }).map((item, index) => {
+          const isChecked = selectedItem.filter(selected => isEqual(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(selected, item)).length > 0;
           return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
             key: itemProps.id,
             "aria-label": itemText,
@@ -423,6 +433,14 @@ FilterableMultiSelect.propTypes = {
    * Specify a label to be read by screen readers on the container note.
    */
   ariaLabel: deprecate(PropTypes.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.string,
+  /**
+   * Specify the text that should be read for screen readers to clear selection.
+   */
+  clearSelectionText: PropTypes.string,
   /**
    * Specify the direction of the multiselect dropdown. Can be either top or bottom.
    */
@@ -544,7 +562,9 @@ FilterableMultiSelect.defaultProps = {
   locale: 'en',
   sortItems: 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;
 

package/es/components/MultiSelect/MultiSelect.js

@@ -8,7 +8,7 @@
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
 import cx from 'classnames';
-import Downshift, { useSelect } from 'downshift';
+import { useSelect } from 'downshift';
 import isEqual from 'lodash.isequal';
 import PropTypes from 'prop-types';
 import React__default, { useContext, useRef, useState } from 'react';
@@ -24,18 +24,22 @@ import '../FluidForm/FluidForm.js';
 import { FormContext } from '../FluidForm/FormContext.js';
 import { match } from '../../internal/keyboard/match.js';
 import { ListBoxSize } from '../ListBox/ListBoxPropTypes.js';
-import { Delete, Escape, Space, ArrowDown } from '../../internal/keyboard/keys.js';
+import { Delete, Escape, Space, ArrowDown, Enter } from '../../internal/keyboard/keys.js';
 
 const noop = () => {};
 const getInstanceId = setupGetInstanceId();
 const {
   ItemClick,
-  MenuBlur,
-  MenuKeyDownArrowDown,
-  MenuKeyDownArrowUp,
-  MenuKeyDownEscape,
-  MenuKeyDownSpaceButton,
-  ToggleButtonClick
+  ToggleButtonBlur,
+  ToggleButtonKeyDownArrowDown,
+  ToggleButtonKeyDownArrowUp,
+  ToggleButtonKeyDownEnter,
+  ToggleButtonKeyDownEscape,
+  ToggleButtonKeyDownSpaceButton,
+  ItemMouseMove,
+  ToggleButtonClick,
+  ToggleButtonKeyDownHome,
+  ToggleButtonKeyDownEnd
 } = useSelect.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -49,7 +53,7 @@ const defaultItemToString = item => {
   }
   return '';
 };
-const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(_ref, ref) {
+const MultiSelect = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
   let {
     className: containerClassName,
     id,
@@ -92,7 +96,6 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
   const {
     current: multiSelectInstanceId
   } = useRef(getInstanceId());
-  const [highlightedIndex, setHighlightedIndex] = useState();
   const [isFocused, setIsFocused] = useState(false);
   const [inputFocused, setInputFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(open || false);
@@ -108,31 +111,46 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
     onChange,
     selectedItems: selected
   });
-  const {
-    getToggleButtonProps,
-    getLabelProps,
-    getMenuProps,
-    getItemProps,
-    selectedItem
-  } = useSelect({
+  const selectProps = {
     ...downshiftProps,
-    highlightedIndex,
+    stateReducer,
     isOpen,
     itemToString: items => {
       return Array.isArray(items) && items.map(function (item) {
         return itemToString(item);
       }).join(', ') || '';
     },
-    onStateChange,
     selectedItem: controlledSelectedItems,
-    items
-  });
+    items,
+    isItemDisabled(item, _index) {
+      return item.disabled;
+    }
+  };
+  const {
+    getToggleButtonProps,
+    getLabelProps,
+    getMenuProps,
+    getItemProps,
+    selectedItem,
+    highlightedIndex
+  } = useSelect(selectProps);
   const toggleButtonProps = getToggleButtonProps({
     onFocus: () => {
       setInputFocused(true);
     },
     onBlur: () => {
       setInputFocused(false);
+    },
+    onKeyDown: e => {
+      if (!disabled) {
+        if ((match(e, Delete) || match(e, Escape)) && !isOpen) {
+          clearSelection();
+          e.stopPropagation();
+        }
+        if ((match(e, Space) || match(e, ArrowDown) || match(e, Enter)) && !isOpen) {
+          setIsOpenWrapper(true);
+        }
+      }
     }
   });
   const mergedRef = mergeRefs(toggleButtonProps.ref, ref);
@@ -198,47 +216,54 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
   } else if (selectionFeedback === 'top-after-reopen') {
     sortOptions.selectedItems = topItems;
   }
-  function onStateChange(changes) {
-    if (changes.isOpen && !isOpen) {
-      setTopItems(controlledSelectedItems);
-    }
+  function stateReducer(state, actionAndChanges) {
     const {
+      changes,
+      props,
       type
+    } = actionAndChanges;
+    const {
+      highlightedIndex
     } = changes;
+    if (changes.isOpen && !isOpen) {
+      setTopItems(controlledSelectedItems);
+    }
     switch (type) {
       case ItemClick:
-      case MenuKeyDownSpaceButton:
+      case ToggleButtonKeyDownSpaceButton:
+      case ToggleButtonKeyDownEnter:
         if (changes.selectedItem === undefined) {
           break;
         }
         onItemChange(changes.selectedItem);
-        break;
-      case MenuKeyDownArrowDown:
-      case MenuKeyDownArrowUp:
-        setHighlightedIndex(changes.highlightedIndex);
-        break;
-      case MenuBlur:
-      case MenuKeyDownEscape:
+        return {
+          ...changes,
+          highlightedIndex: state.highlightedIndex
+        };
+      case ToggleButtonBlur:
+      case ToggleButtonKeyDownEscape:
         setIsOpenWrapper(false);
-        setHighlightedIndex(changes.highlightedIndex);
         break;
       case ToggleButtonClick:
         setIsOpenWrapper(changes.isOpen || false);
-        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;
   }
-  const onKeyDown = e => {
-    if (!disabled) {
-      if (match(e, Delete) || match(e, Escape)) {
-        clearSelection();
-        e.stopPropagation();
-      }
-      if (match(e, Space) || match(e, ArrowDown)) {
-        setIsOpenWrapper(true);
-      }
-    }
-  };
   const multiSelectFieldWrapperClasses = cx(`${prefix}--list-box__field--wrapper`, {
     [`${prefix}--list-box__field--wrapper--input-focused`]: inputFocused
   });
@@ -303,17 +328,14 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
     "aria-disabled": disabled || readOnly,
     "aria-describedby": !inline && !invalid && !warn && helperText ? helperId : undefined
   }, toggleButtonProps, {
-    ref: mergedRef,
-    onKeyDown: onKeyDown
+    ref: mergedRef
   }, readOnlyEventHandlers), /*#__PURE__*/React__default.createElement("span", {
     id: fieldLabelId,
     className: `${prefix}--list-box__label`
   }, label), /*#__PURE__*/React__default.createElement(ListBox.MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), /*#__PURE__*/React__default.createElement(ListBox.Menu, _extends({
-    "aria-multiselectable": "true"
-  }, getMenuProps()), isOpen &&
+  }))), /*#__PURE__*/React__default.createElement(ListBox.Menu, getMenuProps(), isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   sortItems(items, sortOptions).map((item, index) => {
     const isChecked = selectedItems.filter(selected => isEqual(selected, item)).length > 0;
@@ -321,8 +343,7 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
       item,
       // we don't want Downshift to set aria-selected for us
       // we also don't want to set 'false' for reader verbosity's sake
-      ['aria-selected']: isChecked ? true : undefined,
-      disabled: item.disabled
+      ['aria-selected']: isChecked
     });
     const itemText = itemToString(item);
     return /*#__PURE__*/React__default.createElement(ListBox.MenuItem, _extends({
@@ -330,7 +351,8 @@ const MultiSelect = /*#__PURE__*/React__default.forwardRef(function MultiSelect(
       isActive: isChecked,
       "aria-label": itemText,
       isHighlighted: highlightedIndex === index,
-      title: itemText
+      title: itemText,
+      disabled: itemProps['aria-disabled']
     }, itemProps), /*#__PURE__*/React__default.createElement("div", {
       className: `${prefix}--checkbox-wrapper`
     }, /*#__PURE__*/React__default.createElement("span", {
@@ -373,8 +395,7 @@ MultiSelect.propTypes = {
   /**
    * Additional props passed to Downshift
    */
-  // @ts-ignore
-  downshiftProps: PropTypes.shape(Downshift.propTypes),
+  downshiftProps: PropTypes.object,
   /**
    * Provide helper text that is used alongside the control label for
    * additional help

package/es/components/NumberInput/NumberInput.d.ts

@@ -128,5 +128,5 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      */
     warnText?: ReactNode;
 }
-declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<unknown>>;
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
 export { NumberInput };

package/es/components/NumberInput/NumberInput.js

@@ -149,6 +149,22 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     [`${prefix}--number-input--fluid--disabled`]: isFluid && disabled
   });
   const Icon = normalizedProps.icon;
+  function handleStepperClick(event, direction) {
+    if (inputRef.current) {
+      direction === 'up' ? inputRef.current.stepUp() : inputRef.current.stepDown();
+      const state = {
+        value: Number(inputRef.current.value),
+        direction: direction
+      };
+      setValue(state.value);
+      if (onChange) {
+        onChange(event, state);
+      }
+      if (onClick) {
+        onClick(event, state);
+      }
+    }
+  }
   return /*#__PURE__*/React__default.createElement("div", {
     className: outerElementClasses,
     onFocus: isFluid ? handleFocus : undefined,
@@ -204,19 +220,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     "aria-label": decrementNumLabel || iconDescription,
     className: `${prefix}--number__control-btn down-icon`,
     disabled: disabled || readOnly,
-    onClick: event => {
-      const state = {
-        value: clamp(max, min, parseInt(value) - step),
-        direction: 'down'
-      };
-      setValue(state.value);
-      if (onChange) {
-        onChange(event, state);
-      }
-      if (onClick) {
-        onClick(event, state);
-      }
-    },
+    onClick: event => handleStepperClick(event, 'down'),
     tabIndex: -1,
     title: decrementNumLabel || iconDescription,
     type: "button"
@@ -228,19 +232,7 @@ const NumberInput = /*#__PURE__*/React__default.forwardRef(function NumberInput(
     "aria-label": incrementNumLabel || iconDescription,
     className: `${prefix}--number__control-btn up-icon`,
     disabled: disabled || readOnly,
-    onClick: event => {
-      const state = {
-        value: clamp(max, min, parseInt(value) + step),
-        direction: 'up'
-      };
-      setValue(state.value);
-      if (onChange) {
-        onChange(event, state);
-      }
-      if (onClick) {
-        onClick(event, state);
-      }
-    },
+    onClick: event => handleStepperClick(event, 'up'),
     tabIndex: -1,
     title: incrementNumLabel || iconDescription,
     type: "button"
@@ -467,22 +459,4 @@ function disableWheel(e) {
   e.preventDefault();
 }
 
-/**
- * Clamp the given value between the upper bound `max` and the lower bound `min`
- *
- * 16 digit min/max more precise than Infinity. Somewhere in 9 quadrillion,
- * there will be integer display issues at runtime. 9quad is a safe cutoff.
- * @param {number} max
- * @param {number} min
- * @param {number} value
- */
-const boundLimit = 9000000000000000; // 16 digit, 9 quadrillion
-
-function clamp() {
-  let max = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : boundLimit;
-  let min = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -boundLimit;
-  let value = arguments.length > 2 ? arguments[2] : undefined;
-  return Math.min(max, Math.max(min, value));
-}
-
 export { NumberInput, translationIds };

package/es/components/Slider/Slider.d.ts

@@ -300,6 +300,12 @@ export default class Slider extends PureComponent<SliderProps> {
      * @returns `val` if `max>=val>=min`; `min` if `val<min`; `max` if `val>max`.
      */
     clamp(val: any, min: any, max: any): number;
+    /**
+     * Takes a value and ensures it fits to the steps of the range
+     * @param value
+     * @returns value of the nearest step
+     */
+    nearestStepValue(value: any): number;
     /**
      * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
      * started on somewhere other than the thumb without a corresponding "move"

package/es/components/Slider/Slider.js

@@ -129,7 +129,7 @@ class Slider extends PureComponent {
         clientX
       });
       this.setState({
-        value,
+        value: this.nearestStepValue(value),
         left,
         isValid: true
       });
@@ -178,7 +178,7 @@ class Slider extends PureComponent {
         value: (delta > 0 ? Math.floor(this.state.value / (this.props.step ?? Slider.defaultProps.step)) * (this.props.step ?? Slider.defaultProps.step) : this.state.value) + delta
       });
       this.setState({
-        value,
+        value: this.nearestStepValue(value),
         left,
         isValid: true
       });
@@ -388,6 +388,21 @@ class Slider extends PureComponent {
   clamp(val, min, max) {
     return Math.max(min, Math.min(val, max));
   }
+
+  /**
+   * Takes a value and ensures it fits to the steps of the range
+   * @param value
+   * @returns value of the nearest step
+   */
+  nearestStepValue(value) {
+    const tempInput = document.createElement('input');
+    tempInput.type = 'range';
+    tempInput.min = `${this.props.min}`;
+    tempInput.max = `${this.props.max}`;
+    tempInput.step = `${this.props.step}`;
+    tempInput.value = `${value}`;
+    return parseFloat(tempInput.value);
+  }
   // syncs invalid state and prop
   static getDerivedStateFromProps(props, state) {
     const {

package/es/components/TextArea/TextArea.js

@@ -59,7 +59,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     id,
     onChange: evt => {
       if (!other.disabled && onChange) {
-        evt.persist();
+        evt?.persist?.();
         // delay textCount assignation to give the textarea element value time to catch up if is a controlled input
         setTimeout(() => {
           setTextCount(evt.target?.value?.length);

package/es/components/Tile/Tile.js

@@ -72,12 +72,12 @@ const ClickableTile = /*#__PURE__*/React__default.forwardRef(function ClickableT
   const classes = cx(`${prefix}--tile`, `${prefix}--tile--clickable`, clicked && `${prefix}--tile--is-clicked`, light && `${prefix}--tile--light`, className);
   const [isSelected, setIsSelected] = useState(clicked);
   function handleOnClick(evt) {
-    evt.persist();
+    evt?.persist?.();
     setIsSelected(!isSelected);
     onClick(evt);
   }
   function handleOnKeyDown(evt) {
-    evt.persist();
+    evt?.persist?.();
     if (matches(evt, [Enter, Space])) {
       evt.preventDefault();
       setIsSelected(!isSelected);
@@ -181,7 +181,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
   // TODO: rename to handleClick when handleClick prop is deprecated
   function handleOnClick(evt) {
     evt.preventDefault();
-    evt.persist();
+    evt?.persist?.();
     setIsSelected(!isSelected);
     clickHandler(evt);
     onChange(evt);
@@ -189,7 +189,7 @@ const SelectableTile = /*#__PURE__*/React__default.forwardRef(function Selectabl
 
   // TODO: rename to handleKeyDown when handleKeyDown prop is deprecated
   function handleOnKeyDown(evt) {
-    evt.persist();
+    evt?.persist?.();
     if (matches(evt, [Enter, Space])) {
       evt.preventDefault();
       setIsSelected(!isSelected);
@@ -335,7 +335,7 @@ const ExpandableTile = /*#__PURE__*/React__default.forwardRef(function Expandabl
     }
   }
   function handleClick(evt) {
-    evt.persist();
+    evt?.persist?.();
     setIsExpanded(!isExpanded);
     setMaxHeight();
   }

package/lib/components/ComboBox/ComboBox.js

@@ -219,7 +219,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
     }
     if (event.target === textInput.current && isOpen) {
       event.preventDownshiftDefault = true;
-      event.persist();
+      event?.persist?.();
     }
   };
   const showWarning = !invalid && warn;
@@ -300,8 +300,6 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
       }
     });
     const inputProps = getInputProps({
-      // Remove excess aria `aria-labelledby`. HTML <label for> provides this aria information.
-      'aria-labelledby': null,
       disabled,
       placeholder,
       onClick() {
@@ -318,7 +316,7 @@ const ComboBox = /*#__PURE__*/React__default["default"].forwardRef((props, ref)
           if (event.target === textInput.current && isOpen) {
             toggleMenu();
             event.preventDownshiftDefault = true;
-            event.persist();
+            event?.persist?.();
           }
         }
         if (match.match(event, keys.Home)) {

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,