@carbon/react 1.93.0 → 1.94.0-rc.0

package/es/components/CodeSnippet/CodeSnippet.d.ts

@@ -111,7 +111,7 @@ declare namespace CodeSnippet {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * Specify a label to be read by screen readers on the containing textbox
          * node

package/es/components/Copy/Copy.d.ts

@@ -50,7 +50,7 @@ declare namespace Copy {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/es/components/CopyButton/CopyButton.d.ts

@@ -51,7 +51,7 @@ declare namespace CopyButton {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/es/components/DataTable/DataTable.d.ts

@@ -236,7 +236,7 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
 export declare const DataTable: {
     <RowType, ColTypes extends any[]>(props: DataTableProps<RowType, ColTypes>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
     Table: {
-        ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: React.PropsWithChildren<import("./Table").TableProps>): import("react/jsx-runtime").JSX.Element;
+        ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: React.PropsWithChildren<import("./Table").TableProps>): import("react/jsx-runtime").JSX.Element;
         propTypes: {
             children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             className: PropTypes.Requireable<string>;

package/es/components/DataTable/Table.d.ts

@@ -39,7 +39,7 @@ export interface TableProps {
     tabIndex?: number;
 }
 export declare const Table: {
-    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Pass in the children that will be rendered within the Table

package/es/components/DataTable/Table.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React, { useContext, useState, useRef, useCallback } from 'react';
+import React, { useContext, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix.js';
@@ -53,7 +53,6 @@ const Table = ({
   stickyHeader,
   overflowMenuOnHover = true,
   experimentalAutoAlign = false,
-  tabIndex,
   ...other
 }) => {
   const {
@@ -61,7 +60,6 @@ const Table = ({
     descriptionId
   } = useContext(TableContext);
   const prefix = usePrefix();
-  const [isScrollable, setIsScrollable] = useState(false);
   const tableRef = useRef(null);
   const componentClass = cx(`${prefix}--data-table`, className, {
     [`${prefix}--data-table--${size}`]: size,
@@ -100,22 +98,6 @@ const Table = ({
   const debouncedSetTableAlignment = debounce(setTableAlignment, 100);
   useWindowEvent('resize', debouncedSetTableAlignment);
 
-  // Used to set a tabIndex when the Table is horizontally scrollable
-  const setTabIndex = useCallback(() => {
-    const tableContainer = tableRef?.current?.parentNode;
-    const tableHeader = tableRef?.current?.firstChild;
-    if (tableHeader?.scrollWidth > tableContainer?.clientWidth) {
-      setIsScrollable(true);
-    } else {
-      setIsScrollable(false);
-    }
-  }, []);
-  const debouncedSetTabIndex = debounce(setTabIndex, 100);
-  useWindowEvent('resize', debouncedSetTabIndex);
-  useIsomorphicEffect(() => {
-    setTabIndex();
-  }, [setTabIndex]);
-
   // recalculate table alignment once fonts have loaded
   if (typeof document !== 'undefined' && document?.fonts?.status && document.fonts.status !== 'loaded') {
     document.fonts.ready.then(() => {
@@ -126,8 +108,7 @@ const Table = ({
     setTableAlignment();
   }, [setTableAlignment, size]);
   const table = /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--data-table-content`,
-    tabIndex: tabIndex ?? (isScrollable ? 0 : undefined)
+    className: `${prefix}--data-table-content`
   }, /*#__PURE__*/React.createElement("table", _extends({
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId

package/es/components/DataTable/TableToolbar.js

@@ -25,6 +25,7 @@ const TableToolbar = ({
     [`${prefix}--table-toolbar--${size}`]: size
   });
   return /*#__PURE__*/React.createElement("section", _extends({
+    role: "group",
     "aria-label": deprecatedAriaLabel || ariaLabel
   }, rest, {
     className: className

package/es/components/DataTable/state/sorting.d.ts

@@ -43,7 +43,8 @@ export declare const getNextSortDirection: (prevHeader: string, currentHeader: s
  * @param state - Current table state.
  * @param key - Header key to sort by.
  */
-export declare const getNextSortState: <ColTypes extends any[]>(props: Props, state: State<ColTypes>, { key }: {
+export declare const getNextSortState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+props: Props, state: State<ColTypes>, { key }: {
     key: string;
 }) => Pick<State<ColTypes>, "sortHeaderKey" | "sortDirection" | "rowIds">;
 /**
@@ -54,5 +55,6 @@ export declare const getNextSortState: <ColTypes extends any[]>(props: Props, st
  * @param key - Header key to sort by.
  * @param sortDirection - Sort direction to apply.
  */
-export declare const getSortedState: <ColTypes extends any[]>({ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
+export declare const getSortedState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+{ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
 export {};

package/es/components/DatePicker/DatePicker.d.ts

@@ -117,6 +117,14 @@ export interface DatePickerProps {
      * Provide the text that is displayed when the control is in warning state (Fluid only)
      */
     warnText?: ReactNode;
+    /**
+     * Accessible aria-label for the "next month" arrow icon.
+     */
+    nextMonthAriaLabel?: string;
+    /**
+     * Accessible aria-label for the "previous month" arrow icon.
+     */
+    prevMonthAriaLabel?: string;
 }
 declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;

package/es/components/DatePicker/DatePicker.js

@@ -105,12 +105,6 @@ const carbonFlatpickrMonthSelectPlugin = config => fp => {
 function isLabelTextEmpty(children) {
   return children.every(child => !child.props.labelText);
 }
-const rightArrowHTML = `<svg width="16px" height="16px" viewBox="0 0 16 16">
-  <polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/>
-</svg>`;
-const leftArrowHTML = `<svg width="16px" height="16px" viewBox="0 0 16 16">
-  <polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/>
-</svg>`;
 function updateClassNames(calendar, prefix) {
   const calendarContainer = calendar.calendarContainer;
   const daysContainer = calendar.days;
@@ -162,6 +156,8 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
   short = false,
   value,
   parseDate: parseDateProp,
+  nextMonthAriaLabel = 'Next month',
+  prevMonthAriaLabel = 'Previous month',
   ...rest
 }, ref) {
   const prefix = usePrefix();
@@ -342,6 +338,16 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
     } else if (parseDateProp) {
       parseDate = parseDateProp;
     }
+
+    // Accessible arrow icons (localized manually)
+    // Flatpickr does not currently support localization of next/previous month
+    // labels, so we inject translated aria-labels based on the provided locale.
+    const rightArrowHTML = `<svg aria-label="${nextMonthAriaLabel}" role="img" width="16px" height="16px" viewBox="0 0 16 16">
+      <polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/>
+    </svg>`;
+    const leftArrowHTML = `<svg aria-label="${prevMonthAriaLabel}" role="img" width="16px" height="16px" viewBox="0 0 16 16">
+      <polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/>
+    </svg>`;
     const {
       current: start
     } = startInputField;
@@ -519,7 +525,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput, datePickerType]);
+  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput, datePickerType, nextMonthAriaLabel, prevMonthAriaLabel]);
 
   // this hook allows consumers to access the flatpickr calendar
   // instance for cases where functions like open() or close()
@@ -874,7 +880,15 @@ DatePicker.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state (Fluid only)
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Accessible aria-label for the "next month" arrow icon.
+   */
+  nextMonthAriaLabel: PropTypes.string,
+  /**
+   * Accessible aria-label for the "previous month" arrow icon.
+   */
+  prevMonthAriaLabel: PropTypes.string
 };
 
 export { DatePicker as default };

package/es/components/FluidComboBox/FluidComboBox.d.ts

@@ -72,11 +72,6 @@ export interface FluidComboBoxProps<ItemType> extends ComboBoxProps<ItemType>, P
      * consuming component what kind of internal state changes are occurring.
      */
     onChange: (data: OnChangeData<ItemType>) => void;
-    /**
-     * An optional callback to render the currently selected item as a react element instead of only
-     * as a string.
-     */
-    renderSelectedItem?: (selectedItem: ItemType) => React.ReactNode;
     /**
      * In the case you want to control the dropdown selection entirely.
      * */

package/es/components/FluidComboBox/FluidComboBox.js

@@ -91,11 +91,6 @@ FluidComboBox.propTypes = {
    * consuming component what kind of internal state changes are occurring.
    */
   onChange: PropTypes.func.isRequired,
-  /**
-   * An optional callback to render the currently selected item as a react element instead of only
-   * as a string.
-   */
-  renderSelectedItem: PropTypes.func,
   /**
    * In the case you want to control the dropdown selection entirely.
    */

package/es/components/Slider/Slider.js

@@ -755,7 +755,7 @@ const Slider = props => {
    *          as the step.
    */
   const calcValueForDelta = (currentValue, delta, step = 1) => {
-    const base = delta > 0 ? Math.floor(currentValue / step) * step : currentValue;
+    const base = delta > 0 ? Math.round(currentValue / step) * step : currentValue;
     const newValue = base + delta;
     // TODO: Why is the logical OR needed here?
     const decimals = (step.toString().split('.')[1] || '').length;

package/es/components/Tabs/Tabs.js

@@ -10,7 +10,7 @@ import { Close, ChevronLeft, ChevronRight } from '@carbon/icons-react';
 import { breakpoints } from '@carbon/layout';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
-import React, { forwardRef, createContext, useRef, useState, useMemo, isValidElement, useEffect, useCallback } from 'react';
+import React, { forwardRef, createContext, useRef, useState, useMemo, isValidElement, useCallback, useEffect } from 'react';
 import '../Grid/FlexGrid.js';
 import { Grid as GridAsGridComponent } from '../Grid/Grid.js';
 import '../Grid/Row.js';
@@ -24,7 +24,6 @@ import { useControllableState } from '../../internal/useControllableState.js';
 import { useId } from '../../internal/useId.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
-import { getInteractiveContent } from '../../internal/useNoInteractiveChildren.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import { Delete, ArrowRight, ArrowLeft, Home, End, ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
 import { match, matches } from '../../internal/keyboard/match.js';
@@ -1110,10 +1109,6 @@ const TabPanel = /*#__PURE__*/React.forwardRef(({
   ...rest
 }, forwardRef) => {
   const prefix = usePrefix();
-  const panel = useRef(null);
-  const ref = useMergedRefs([forwardRef, panel]);
-  const [tabIndex, setTabIndex] = useState(0);
-  const [interactiveContent, setInteractiveContent] = useState(false);
   const {
     selectedIndex,
     baseId
@@ -1121,50 +1116,13 @@ const TabPanel = /*#__PURE__*/React.forwardRef(({
   const index = React.useContext(TabPanelContext);
   const id = `${baseId}-tabpanel-${index}`;
   const tabId = `${baseId}-tab-${index}`;
-  const className = cx(`${prefix}--tab-content`, customClassName, {
-    [`${prefix}--tab-content--interactive`]: interactiveContent
-  });
-  useEffect(() => {
-    if (!panel.current) {
-      return;
-    }
-    const content = getInteractiveContent(panel.current);
-    if (content) {
-      setInteractiveContent(true);
-      setTabIndex(-1);
-    }
-  }, []);
-
-  // tabindex should only be 0 if no interactive content in children
-  useEffect(() => {
-    const node = panel.current;
-    if (!node) {
-      return;
-    }
-    function callback() {
-      const content = getInteractiveContent(node);
-      if (content) {
-        setInteractiveContent(true);
-        setTabIndex(-1);
-      } else {
-        setInteractiveContent(false);
-        setTabIndex(0);
-      }
-    }
-    const observer = new MutationObserver(callback);
-    observer.observe(node, {
-      childList: true,
-      subtree: true
-    });
-    return () => observer.disconnect();
-  }, []);
+  const className = cx(`${prefix}--tab-content`, customClassName);
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     "aria-labelledby": tabId,
     id: id,
     className: className,
-    ref: ref,
+    ref: forwardRef,
     role: "tabpanel",
-    tabIndex: tabIndex,
     hidden: selectedIndex !== index
   }), children);
 });

package/es/components/TreeView/TreeNode.js

@@ -142,6 +142,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
   const currentNode = useRef(null);
   const currentNodeLabel = useRef(null);
   const prefix = usePrefix();
+  const nodeLabelId = `${id}__label`;
   const renderLabelText = () => {
     if (isEllipsisApplied && tooltipText) {
       return /*#__PURE__*/React.createElement(IconButton, {
@@ -152,11 +153,13 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
         className: `${prefix}--tree-node__label__text-button`,
         wrapperClasses: `${prefix}--popover-container`
       }, /*#__PURE__*/React.createElement("span", {
+        id: nodeLabelId,
         ref: labelTextRef,
         className: `${prefix}--tree-node__label__text`
       }, label));
     }
     return /*#__PURE__*/React.createElement("span", {
+      id: nodeLabelId,
       ref: labelTextRef,
       className: `${prefix}--tree-node__label__text`
     }, label);
@@ -395,6 +398,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
     }), nodeContent), children && /*#__PURE__*/React.createElement("ul", {
       id: `${id}-subtree`,
       role: "group",
+      "aria-labelledby": nodeLabelId,
       className: cx(`${prefix}--tree-node__children`, {
         [`${prefix}--tree-node--hidden`]: !expanded
       })
@@ -408,6 +412,7 @@ const TreeNode = /*#__PURE__*/React.forwardRef(({
   }), nodeContent, children && /*#__PURE__*/React.createElement("ul", {
     id: `${id}-subtree`,
     role: "group",
+    "aria-labelledby": nodeLabelId,
     className: cx(`${prefix}--tree-node__children`, {
       [`${prefix}--tree-node--hidden`]: !expanded
     })

package/es/components/UIShell/Content.d.ts

@@ -69,7 +69,7 @@ declare const Content: {
         results?: number | undefined;
         security?: string | undefined;
         unselectable?: "on" | "off" | undefined;
-        popover?: "" | "auto" | "manual" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
         popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
         popoverTarget?: string | undefined;
         inert?: boolean | undefined;

package/es/tools/events.d.ts

@@ -14,4 +14,4 @@ import type { SyntheticEvent } from 'react';
  * @param handlers - An array of event handler functions.
  * @returns A composite event handler.
  */
-export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent<Element, Event>>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;
+export declare const composeEventHandlers: <E extends SyntheticEvent = SyntheticEvent>(handlers: (((event: E, ...args: any[]) => void) | undefined)[]) => (event: E, ...args: any[]) => void;

package/lib/components/CodeSnippet/CodeSnippet.d.ts

@@ -111,7 +111,7 @@ declare namespace CodeSnippet {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * Specify a label to be read by screen readers on the containing textbox
          * node

package/lib/components/Copy/Copy.d.ts

@@ -50,7 +50,7 @@ declare namespace Copy {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

package/lib/components/CopyButton/CopyButton.d.ts

@@ -51,7 +51,7 @@ declare namespace CopyButton {
         /**
          * Specify how the trigger should align with the tooltip
          */
-        align: PropTypes.Requireable<string> | PropTypes.Validator<string>;
+        align: PropTypes.Requireable<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top"> | PropTypes.Validator<import("@floating-ui/utils").Placement | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "left-bottom" | "left-top" | "right-bottom" | "right-top">;
         /**
          * **Experimental**: Will attempt to automatically align the tooltip. Requires
          * React v17+

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

@@ -236,7 +236,7 @@ export interface DataTableProps<RowType, ColTypes extends any[]> extends Transla
 export declare const DataTable: {
     <RowType, ColTypes extends any[]>(props: DataTableProps<RowType, ColTypes>): React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | null;
     Table: {
-        ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: React.PropsWithChildren<import("./Table").TableProps>): import("react/jsx-runtime").JSX.Element;
+        ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: React.PropsWithChildren<import("./Table").TableProps>): import("react/jsx-runtime").JSX.Element;
         propTypes: {
             children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
             className: PropTypes.Requireable<string>;

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

@@ -39,7 +39,7 @@ export interface TableProps {
     tabIndex?: number;
 }
 export declare const Table: {
-    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, tabIndex, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, useZebraStyles, size, isSortable, useStaticWidth, stickyHeader, overflowMenuOnHover, experimentalAutoAlign, ...other }: PropsWithChildren<TableProps>): import("react/jsx-runtime").JSX.Element;
     propTypes: {
         /**
          * Pass in the children that will be rendered within the Table

package/lib/components/DataTable/Table.js

@@ -57,7 +57,6 @@ const Table = ({
   stickyHeader,
   overflowMenuOnHover = true,
   experimentalAutoAlign = false,
-  tabIndex,
   ...other
 }) => {
   const {
@@ -65,7 +64,6 @@ const Table = ({
     descriptionId
   } = React.useContext(TableContext.TableContext);
   const prefix = usePrefix.usePrefix();
-  const [isScrollable, setIsScrollable] = React.useState(false);
   const tableRef = React.useRef(null);
   const componentClass = cx(`${prefix}--data-table`, className, {
     [`${prefix}--data-table--${size}`]: size,
@@ -104,22 +102,6 @@ const Table = ({
   const debouncedSetTableAlignment = debounce.debounce(setTableAlignment, 100);
   useEvent.useWindowEvent('resize', debouncedSetTableAlignment);
 
-  // Used to set a tabIndex when the Table is horizontally scrollable
-  const setTabIndex = React.useCallback(() => {
-    const tableContainer = tableRef?.current?.parentNode;
-    const tableHeader = tableRef?.current?.firstChild;
-    if (tableHeader?.scrollWidth > tableContainer?.clientWidth) {
-      setIsScrollable(true);
-    } else {
-      setIsScrollable(false);
-    }
-  }, []);
-  const debouncedSetTabIndex = debounce.debounce(setTabIndex, 100);
-  useEvent.useWindowEvent('resize', debouncedSetTabIndex);
-  useIsomorphicEffect.default(() => {
-    setTabIndex();
-  }, [setTabIndex]);
-
   // recalculate table alignment once fonts have loaded
   if (typeof document !== 'undefined' && document?.fonts?.status && document.fonts.status !== 'loaded') {
     document.fonts.ready.then(() => {
@@ -130,8 +112,7 @@ const Table = ({
     setTableAlignment();
   }, [setTableAlignment, size]);
   const table = /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--data-table-content`,
-    tabIndex: tabIndex ?? (isScrollable ? 0 : undefined)
+    className: `${prefix}--data-table-content`
   }, /*#__PURE__*/React.createElement("table", _rollupPluginBabelHelpers.extends({
     "aria-labelledby": titleId,
     "aria-describedby": descriptionId

package/lib/components/DataTable/TableToolbar.js

@@ -29,6 +29,7 @@ const TableToolbar = ({
     [`${prefix}--table-toolbar--${size}`]: size
   });
   return /*#__PURE__*/React.createElement("section", _rollupPluginBabelHelpers.extends({
+    role: "group",
     "aria-label": deprecatedAriaLabel || ariaLabel
   }, rest, {
     className: className

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

@@ -43,7 +43,8 @@ export declare const getNextSortDirection: (prevHeader: string, currentHeader: s
  * @param state - Current table state.
  * @param key - Header key to sort by.
  */
-export declare const getNextSortState: <ColTypes extends any[]>(props: Props, state: State<ColTypes>, { key }: {
+export declare const getNextSortState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+props: Props, state: State<ColTypes>, { key }: {
     key: string;
 }) => Pick<State<ColTypes>, "sortHeaderKey" | "sortDirection" | "rowIds">;
 /**
@@ -54,5 +55,6 @@ export declare const getNextSortState: <ColTypes extends any[]>(props: Props, st
  * @param key - Header key to sort by.
  * @param sortDirection - Sort direction to apply.
  */
-export declare const getSortedState: <ColTypes extends any[]>({ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
+export declare const getSortedState: <ColTypes extends any[]>(// eslint-disable-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
+{ locale, sortRow }: Props, { rowIds, cellsById, initialRowOrder }: State<ColTypes>, key: string, sortDirection: DataTableSortState) => Pick<State<ColTypes>, "rowIds" | "sortDirection" | "sortHeaderKey">;
 export {};

package/lib/components/DatePicker/DatePicker.d.ts

@@ -117,6 +117,14 @@ export interface DatePickerProps {
      * Provide the text that is displayed when the control is in warning state (Fluid only)
      */
     warnText?: ReactNode;
+    /**
+     * Accessible aria-label for the "next month" arrow icon.
+     */
+    nextMonthAriaLabel?: string;
+    /**
+     * Accessible aria-label for the "previous month" arrow icon.
+     */
+    prevMonthAriaLabel?: string;
 }
 declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
 export default DatePicker;

package/lib/components/DatePicker/DatePicker.js

@@ -109,12 +109,6 @@ const carbonFlatpickrMonthSelectPlugin = config => fp => {
 function isLabelTextEmpty(children) {
   return children.every(child => !child.props.labelText);
 }
-const rightArrowHTML = `<svg width="16px" height="16px" viewBox="0 0 16 16">
-  <polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/>
-</svg>`;
-const leftArrowHTML = `<svg width="16px" height="16px" viewBox="0 0 16 16">
-  <polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/>
-</svg>`;
 function updateClassNames(calendar, prefix) {
   const calendarContainer = calendar.calendarContainer;
   const daysContainer = calendar.days;
@@ -166,6 +160,8 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
   short = false,
   value,
   parseDate: parseDateProp,
+  nextMonthAriaLabel = 'Next month',
+  prevMonthAriaLabel = 'Previous month',
   ...rest
 }, ref) {
   const prefix = usePrefix.usePrefix();
@@ -346,6 +342,16 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
     } else if (parseDateProp) {
       parseDate = parseDateProp;
     }
+
+    // Accessible arrow icons (localized manually)
+    // Flatpickr does not currently support localization of next/previous month
+    // labels, so we inject translated aria-labels based on the provided locale.
+    const rightArrowHTML = `<svg aria-label="${nextMonthAriaLabel}" role="img" width="16px" height="16px" viewBox="0 0 16 16">
+      <polygon points="11,8 6,13 5.3,12.3 9.6,8 5.3,3.7 6,3 "/>
+    </svg>`;
+    const leftArrowHTML = `<svg aria-label="${prevMonthAriaLabel}" role="img" width="16px" height="16px" viewBox="0 0 16 16">
+      <polygon points="5,8 10,3 10.7,3.7 6.4,8 10.7,12.3 10,13 "/>
+    </svg>`;
     const {
       current: start
     } = startInputField;
@@ -523,7 +529,7 @@ const DatePicker = /*#__PURE__*/React.forwardRef(function DatePicker({
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput, datePickerType]);
+  }, [savedOnChange, savedOnOpen, readOnly, closeOnSelect, hasInput, datePickerType, nextMonthAriaLabel, prevMonthAriaLabel]);
 
   // this hook allows consumers to access the flatpickr calendar
   // instance for cases where functions like open() or close()
@@ -878,7 +884,15 @@ DatePicker.propTypes = {
   /**
    * Provide the text that is displayed when the control is in warning state (Fluid only)
    */
-  warnText: PropTypes.node
+  warnText: PropTypes.node,
+  /**
+   * Accessible aria-label for the "next month" arrow icon.
+   */
+  nextMonthAriaLabel: PropTypes.string,
+  /**
+   * Accessible aria-label for the "previous month" arrow icon.
+   */
+  prevMonthAriaLabel: PropTypes.string
 };
 
 exports.default = DatePicker;

package/lib/components/FluidComboBox/FluidComboBox.d.ts

@@ -72,11 +72,6 @@ export interface FluidComboBoxProps<ItemType> extends ComboBoxProps<ItemType>, P
      * consuming component what kind of internal state changes are occurring.
      */
     onChange: (data: OnChangeData<ItemType>) => void;
-    /**
-     * An optional callback to render the currently selected item as a react element instead of only
-     * as a string.
-     */
-    renderSelectedItem?: (selectedItem: ItemType) => React.ReactNode;
     /**
      * In the case you want to control the dropdown selection entirely.
      * */

package/lib/components/FluidComboBox/FluidComboBox.js

@@ -95,11 +95,6 @@ FluidComboBox.propTypes = {
    * consuming component what kind of internal state changes are occurring.
    */
   onChange: PropTypes.func.isRequired,
-  /**
-   * An optional callback to render the currently selected item as a react element instead of only
-   * as a string.
-   */
-  renderSelectedItem: PropTypes.func,
   /**
    * In the case you want to control the dropdown selection entirely.
    */

package/lib/components/Slider/Slider.js

@@ -757,7 +757,7 @@ const Slider = props => {
    *          as the step.
    */
   const calcValueForDelta = (currentValue, delta, step = 1) => {
-    const base = delta > 0 ? Math.floor(currentValue / step) * step : currentValue;
+    const base = delta > 0 ? Math.round(currentValue / step) * step : currentValue;
     const newValue = base + delta;
     // TODO: Why is the logical OR needed here?
     const decimals = (step.toString().split('.')[1] || '').length;