@carbon/ibm-products 2.67.0 → 2.68.0

package/es/components/Carousel/Carousel.js

@@ -12,6 +12,7 @@ import { CarouselItem } from './CarouselItem.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
+import { usePrefix } from '@carbon/react';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -49,6 +50,7 @@ const Carousel = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     fadedEdgeColor,
     onChangeIsScrollable = defaults.onChangeIsScrollable,
     onScroll = defaults.onScroll,
+    isScrollMode = false,
     ...rest
   } = props;
   const carouselRef = useRef(null);
@@ -59,6 +61,7 @@ const Carousel = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const childElementsRef = useRef(Array(React__default.Children.count(children)).fill(useRef(null)));
   const leftFadedEdgeColor = typeof fadedEdgeColor === 'object' ? fadedEdgeColor?.left : fadedEdgeColor;
   const rightFadedEdgeColor = typeof fadedEdgeColor === 'object' ? fadedEdgeColor?.right : fadedEdgeColor;
+  const carbonPrefix = usePrefix();
 
   // Trigger callbacks to report state of the carousel
   const handleOnScroll = useCallback(() => {
@@ -156,8 +159,42 @@ const Carousel = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     handleOnScroll();
   }, [handleOnScroll]);
   const handleScrollToView = useCallback(itemNumber => {
+    updateAriaHiddenTabIndex(itemNumber);
     childElementsRef.current[itemNumber].scrollIntoView();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  const getFocusableElements = container => {
+    const notQuery = `:not(.${carbonPrefix}--visually-hidden,.${carbonPrefix}--btn--disabled,[aria-hidden="true"],[disabled])`;
+    // Queries to include element types button, input, select, textarea
+    const queryButton = `button${notQuery}`;
+    const queryInput = `input${notQuery}`;
+    const querySelect = `select${notQuery}`;
+    const queryTextarea = `textarea${notQuery}`;
+    const queryLink = `[href]${notQuery}`;
+    const queryAnchor = `a${notQuery}`;
+    const queryTabIndex = `[tabindex="0"]${notQuery}`;
+    // Final query
+    const query = `${queryButton},${queryLink},${queryAnchor},${queryInput},${querySelect},${queryTextarea},${queryTabIndex}`;
+    return container?.querySelectorAll(`${query}`) ?? [];
+  };
+  const updateAriaHiddenTabIndex = itemNumber => {
+    //aria-hidden need to updated based on the active item, otherwise screen reader will reset to first item while
+    //interact with element via Control + Option + Down Arrow
+    // aria-hidden is set to true to inactive carousal items
+    // tab-index is set to -1 for all inputs in in active elements
+
+    !isScrollMode && childElementsRef.current?.forEach((item, idx) => {
+      const isActive = idx === itemNumber;
+      // Set aria-hidden based on active state
+      item?.setAttribute('aria-hidden', String(!isActive));
+
+      // Update tabIndex for all focusable elements within the item
+      const focusableElements = getFocusableElements(item);
+      focusableElements.forEach(el => {
+        el.tabIndex = isActive ? 0 : -1;
+      });
+    });
+  };
 
   // Trigger a callback after first render (and applied CSS).
   useEffect(() => {
@@ -168,6 +205,8 @@ const Carousel = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     setTimeout(() => {
       // But, because we are making calculations based on the final,
       // applied CSS, we must wait for one more "tick".
+
+      updateAriaHiddenTabIndex(0);
       handleOnScroll();
     }, 0);
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -316,6 +355,12 @@ Carousel.propTypes = {
     left: PropTypes.string,
     right: PropTypes.string
   })]),
+  /**
+   * enable scroll mode when only scroll functionality is required, more than one items will be visible at a time
+   * when isScrollMode is false, component behaves like a carousal and on item will be active at a time
+   * and other items will be hidden and inactive.
+   */
+  isScrollMode: PropTypes.bool,
   /**
    * An optional callback function that returns `true`
    * when the carousel has enough content to be scrollable,

package/es/components/CreateFullPage/CreateFullPage.d.ts

@@ -20,6 +20,7 @@ interface HeaderBreadcrumb {
     /** Provide if this breadcrumb item represents the current page */
     isCurrentPage?: boolean;
 }
+type MaybePromise<T> = Promise<T> | T;
 type CreateFullPageBreadcrumbsProps = {
     /** The header breadcrumbs */
     breadcrumbs?: null | undefined;
@@ -107,9 +108,9 @@ type CreateFullPageBaseProps = {
      *
      * @returns Object - if you want to prevent the modal from closing, return an object with the property preventClose set to true
      */
-    onRequestSubmit: () => {
+    onRequestSubmit: () => MaybePromise<{
         preventClose?: boolean;
-    } | void;
+    } | void>;
     /**
      * A secondary title of the full page, displayed in the influencer area
      */

package/es/components/Datagrid/Datagrid/DraggableElement.d.ts

@@ -15,6 +15,9 @@ interface DraggableElementProps extends PropsWithChildren {
     isSticky?: boolean;
     selected?: boolean;
 }
+/**
+ * Single row in the DraggableItemsList used by CustomizeColumnsTearsheet.
+ */
 declare const DraggableElement: {
     ({ id, elementId, children, classList, disabled, ariaLabel, isSticky, selected, }: DraggableElementProps): React.JSX.Element;
     propTypes: {

package/es/components/Datagrid/Datagrid/DraggableElement.js

@@ -16,6 +16,9 @@ import { useSortable } from '@dnd-kit/sortable';
 
 var _Locked, _DraggableIcon;
 const blockClass = `${pkg.prefix}--datagrid`;
+/**
+ * Single row in the DraggableItemsList used by CustomizeColumnsTearsheet.
+ */
 const DraggableElement = _ref => {
   let {
     id,
@@ -38,20 +41,33 @@ const DraggableElement = _ref => {
     disabled,
     id
   });
-  const content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+
+  // Most of the attributes (ex: role, tabIndex, aria-disabled) are unnecessary for a <button>, so just get the ones we need.
+  const {
+    'aria-pressed': ariaPressed,
+    'aria-describedby': ariaDescribedby
+  } = attributes;
+  const dragHandle = isSticky ? /*#__PURE__*/React__default.createElement("div", {
     className: cx({
       disabled
     }, `${blockClass}__draggable-handleStyle`)
-  }, isSticky ? _Locked || (_Locked = /*#__PURE__*/React__default.createElement(Locked, {
+  }, _Locked || (_Locked = /*#__PURE__*/React__default.createElement(Locked, {
     size: 16
-  })) : _DraggableIcon || (_DraggableIcon = /*#__PURE__*/React__default.createElement(Draggable, {
+  })), ' ') : /*#__PURE__*/React__default.createElement("button", _extends({
+    className: `${blockClass}__draggable-handleStyle`,
+    type: "button",
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedby,
+    "aria-pressed": ariaPressed
+  }, listeners), _DraggableIcon || (_DraggableIcon = /*#__PURE__*/React__default.createElement(Draggable, {
     size: 16
-  }))), children);
+  })));
+  const content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, dragHandle, children);
   const style = {
     transform: !disabled ? CSS.Transform.toString(transform) : undefined,
     transition
   };
-  return /*#__PURE__*/React__default.createElement("li", _extends({
+  return /*#__PURE__*/React__default.createElement("li", {
     className: cx(classList, `${blockClass}__draggable-handleHolder`, {
       [`${blockClass}__draggable-handleHolder--selected`]: selected,
       [`${blockClass}__draggable-handleHolder--sticky`]: isSticky,
@@ -60,16 +76,8 @@ const DraggableElement = _ref => {
     id: elementId ? elementId : id,
     ref: setNodeRef,
     style: style
-  }, attributes, listeners, {
-    "aria-disabled": undefined,
-    "aria-selected": selected,
-    role: "option"
-  }), /*#__PURE__*/React__default.createElement("span", {
-    className: `${blockClass}__shared-ui--assistive-text`
-  }, ariaLabel), /*#__PURE__*/React__default.createElement("div", {
-    className: cx({
-      [`${blockClass}__draggable-handleStyle`]: !disabled
-    }, [`${blockClass}__draggable-handleHolder-droppable`])
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: cx([`${blockClass}__draggable-handleHolder-droppable`])
   }, content));
 };
 DraggableElement.propTypes = {

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.d.ts

@@ -1,21 +1,17 @@
-export default ButtonWrapper;
-declare function ButtonWrapper({ onClick, setIsTearsheetOpen, isTearsheetOpen, iconTooltipLabel, ...rest }: {
-    [x: string]: any;
-    onClick: any;
-    setIsTearsheetOpen: any;
-    isTearsheetOpen: any;
-    iconTooltipLabel?: string | undefined;
-}): React.JSX.Element;
-declare namespace ButtonWrapper {
-    namespace defaultProps {
-        function onClick(): void;
-    }
-    namespace propTypes {
-        export let iconTooltipLabel: any;
-        export let isTearsheetOpen: any;
-        let onClick_1: any;
-        export { onClick_1 as onClick };
-        export let setIsTearsheetOpen: any;
-    }
-}
+/**
+ * Copyright IBM Corp. 2022, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 import * as React from 'react';
+import { Button } from '@carbon/react';
+import { ComponentProps } from 'react';
+interface ButtonWrapperProps extends ComponentProps<typeof Button> {
+    isTearsheetOpen: boolean;
+    iconTooltipLabel?: string;
+    onClick?: () => void;
+    setIsTearsheetOpen: (open: boolean) => void;
+}
+declare const ButtonWrapper: React.ForwardRefExoticComponent<ButtonWrapperProps & React.RefAttributes<HTMLButtonElement>>;
+export default ButtonWrapper;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js

@@ -13,7 +13,7 @@ import { Button } from '@carbon/react';
 import { pkg } from '../../../../../settings.js';
 
 const blockClass = `${pkg.prefix}--datagrid`;
-const ButtonWrapper = _ref => {
+const ButtonWrapper = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     onClick,
     setIsTearsheetOpen,
@@ -30,6 +30,7 @@ const ButtonWrapper = _ref => {
     kind: "ghost",
     hasIconOnly: true,
     "test-id": `${blockClass}__customize-columns-trigger`,
+    ref: ref,
     onClick: () => {
       setIsTearsheetOpen(!isTearsheetOpen);
       if (typeof onClick === 'function') {
@@ -37,10 +38,7 @@ const ButtonWrapper = _ref => {
       }
     }
   }));
-};
-ButtonWrapper.defaultProps = {
-  onClick: () => {}
-};
+});
 ButtonWrapper.propTypes = {
   iconTooltipLabel: PropTypes.string,
   isTearsheetOpen: PropTypes.bool.isRequired,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -45,10 +45,8 @@ const Columns = _ref => {
     ref: listRef
   }, /*#__PURE__*/React__default.createElement("ol", {
     className: `${blockClass}__customize-columns-column-list--focus`,
-    role: "listbox",
     "aria-label": customizeTearsheetHeadingLabel,
-    "aria-describedby": `${blockClass}__customize-columns--instructions`,
-    tabIndex: 0
+    "aria-describedby": `${blockClass}__customize-columns--instructions`
   }, /*#__PURE__*/React__default.createElement("span", {
     "aria-live": "assertive",
     className: `${blockClass}__shared-ui--assistive-text`

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.d.ts

@@ -1,7 +1,8 @@
 export default CustomizeColumnsTearsheet;
-declare function CustomizeColumnsTearsheet({ isOpen, setIsTearsheetOpen, onSaveColumnPrefs, columnDefinitions, originalColumnDefinitions, customizeTearsheetHeadingLabel, primaryButtonTextLabel, secondaryButtonTextLabel, instructionsLabel, findColumnPlaceholderLabel, resetToDefaultLabel, assistiveTextInstructionsLabel, assistiveTextDisabledInstructionsLabel, selectAllLabel, }: {
+declare function CustomizeColumnsTearsheet({ isOpen, setIsTearsheetOpen, launcherButtonRef, onSaveColumnPrefs, columnDefinitions, originalColumnDefinitions, customizeTearsheetHeadingLabel, primaryButtonTextLabel, secondaryButtonTextLabel, instructionsLabel, findColumnPlaceholderLabel, resetToDefaultLabel, assistiveTextInstructionsLabel, assistiveTextDisabledInstructionsLabel, selectAllLabel, }: {
     isOpen: any;
     setIsTearsheetOpen: any;
+    launcherButtonRef: any;
     onSaveColumnPrefs: any;
     columnDefinitions: any;
     originalColumnDefinitions: any;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -18,6 +18,7 @@ const CustomizeColumnsTearsheet = _ref => {
   let {
     isOpen,
     setIsTearsheetOpen,
+    launcherButtonRef,
     onSaveColumnPrefs,
     columnDefinitions,
     originalColumnDefinitions,
@@ -106,6 +107,7 @@ const CustomizeColumnsTearsheet = _ref => {
     open: isOpen,
     title: `${customizeTearsheetHeadingLabel} (${visibleColumnsCount}/${totalColumns})`,
     description: instructionsLabel,
+    launcherButtonRef: launcherButtonRef,
     actions: [{
       kind: 'secondary',
       label: secondaryButtonTextLabel,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -148,10 +148,10 @@ const DraggableItemsList = _ref => {
   }, visibleCols.map(colDef => {
     const colHeaderTitle = getNodeTextContent(colDef.Header);
     const parts = colHeaderTitle.split(new RegExp(`(${filterString})`, 'gi'));
-    const highlightedText = parts.map(part => part.toLowerCase() === filterString.toLowerCase() ? `<strong>${part}</strong>` : part).join('');
+    const highlightedText = parts.map(part => part.toLowerCase() === filterString.toLowerCase() ? /*#__PURE__*/React__default.createElement("strong", null, part) : part);
     const isFrozenColumn = !!colDef.sticky;
     const isDisabled = colDef.disabled;
-    const listContents = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Checkbox, {
+    const listContents = /*#__PURE__*/React__default.createElement(Checkbox, {
       checked: isColumnVisible(colDef),
       disabled: isDisabled || isFrozenColumn,
       onChange: (_, _ref2) => {
@@ -161,17 +161,10 @@ const DraggableItemsList = _ref => {
         return onSelectColumn(colDef, checked);
       },
       id: `${blockClass}__customization-column-${colDef.id}`,
-      labelText: colHeaderTitle,
-      title: colHeaderTitle,
+      labelText: highlightedText,
       className: `${blockClass}__customize-columns-checkbox`,
-      hideLabel: true,
       onKeyDown: event => handleCheckboxKeydown(event, colDef)
-    }), /*#__PURE__*/React__default.createElement("div", {
-      dangerouslySetInnerHTML: {
-        __html: highlightedText
-      },
-      className: `${blockClass}__customize-columns-checkbox-visible-label`
-    }));
+    });
     return /*#__PURE__*/React__default.createElement(DraggableElement, {
       classList: draggableClass,
       key: colDef.id,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.d.ts

@@ -1,6 +1,7 @@
 export default TearsheetWrapper;
-declare function TearsheetWrapper({ instance }: {
+declare function TearsheetWrapper({ instance, launcherButtonRef }: {
     instance: any;
+    launcherButtonRef: any;
 }): React.JSX.Element;
 declare namespace TearsheetWrapper {
     namespace propTypes {

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js

@@ -14,7 +14,8 @@ import { InlineEditContext } from '../InlineEdit/InlineEditContext/InlineEditCon
 
 const TearsheetWrapper = _ref => {
   let {
-    instance
+    instance,
+    launcherButtonRef
   } = _ref;
   const {
     onSaveColumnPrefs,
@@ -37,6 +38,7 @@ const TearsheetWrapper = _ref => {
   return /*#__PURE__*/React__default.createElement(CustomizeColumnsTearsheet, _extends({}, rest, labels, {
     isOpen: isTearsheetOpen,
     setIsTearsheetOpen: setIsTearsheetOpen,
+    launcherButtonRef: launcherButtonRef,
     columnDefinitions: instance.allColumns,
     originalColumnDefinitions: instance.columns,
     onSaveColumnPrefs: updatedColDefs => {

package/es/components/Datagrid/useCustomizeColumns.js

@@ -7,32 +7,39 @@
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import * as React from 'react';
-import TearsheetWrapper from './Datagrid/addons/CustomizeColumns/TearsheetWrapper.js';
 import ButtonWrapper from './Datagrid/addons/CustomizeColumns/ButtonWrapper.js';
+import TearsheetWrapper from './Datagrid/addons/CustomizeColumns/TearsheetWrapper.js';
 
-const useCustomizeColumns = hooks => {
+const useInstance = instance => {
+  const {
+    customizeColumnsProps
+  } = instance;
+  const {
+    labels
+  } = customizeColumnsProps || {};
   const [isTearsheetOpen, setIsTearsheetOpen] = React.useState(false);
-  hooks.useInstance.push(instance => {
-    const {
-      customizeColumnsProps
-    } = instance;
-    const {
-      labels
-    } = customizeColumnsProps || {};
-    Object.assign(instance, {
-      customizeColumnsProps: {
-        ...customizeColumnsProps,
-        isTearsheetOpen,
-        setIsTearsheetOpen
-      },
-      CustomizeColumnsButton: props => /*#__PURE__*/React.createElement(ButtonWrapper, _extends({
-        iconTooltipLabel: labels?.iconTooltipLabel,
-        isTearsheetOpen: isTearsheetOpen,
-        setIsTearsheetOpen: setIsTearsheetOpen
-      }, props)),
-      CustomizeColumnsTearsheet: TearsheetWrapper
-    });
+  const launcherButtonRef = React.useRef(null);
+  const CustomizeColumnsButton = React.useCallback(props => /*#__PURE__*/React.createElement(ButtonWrapper, _extends({}, props, {
+    iconTooltipLabel: labels?.iconTooltipLabel,
+    isTearsheetOpen: isTearsheetOpen,
+    setIsTearsheetOpen: setIsTearsheetOpen,
+    ref: launcherButtonRef
+  })), [isTearsheetOpen, labels?.iconTooltipLabel]);
+  const CustomizeColumnsTearsheet = React.useCallback(props => /*#__PURE__*/React.createElement(TearsheetWrapper, _extends({}, props, {
+    launcherButtonRef: launcherButtonRef
+  })), [launcherButtonRef]);
+  Object.assign(instance, {
+    customizeColumnsProps: {
+      ...customizeColumnsProps,
+      isTearsheetOpen,
+      setIsTearsheetOpen
+    },
+    CustomizeColumnsButton,
+    CustomizeColumnsTearsheet
   });
 };
+const useCustomizeColumns = hooks => {
+  hooks.useInstance.push(useInstance);
+};
 
 export { useCustomizeColumns as default };

package/es/components/Guidebanner/Guidebanner.js

@@ -88,7 +88,8 @@ let Guidebanner = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     },
     onScroll: scrollPercent => {
       setScrollPosition(scrollPercent);
-    }
+    },
+    isScrollMode: true
   }, children), /*#__PURE__*/React__default.createElement("div", {
     className: cx([collapsible || showNavigation ? `${blockClass}__navigation` : null])
   }, collapsible && /*#__PURE__*/React__default.createElement(Button, {

package/es/components/InterstitialScreen/InterstitialScreen.d.ts

@@ -35,6 +35,10 @@ export interface InterstitialScreenProps {
      * Function to call when the close button is clicked.
      */
     onClose?: (value: ActionType) => void;
+    /**
+     * Provide a ref to return focus to once the interstitial is closed.
+     */
+    launcherButtonRef?: RefObject<HTMLElement>;
 }
 type InterstitialScreenComponent = React.ForwardRefExoticComponent<InterstitialScreenProps & React.RefAttributes<HTMLDivElement>> & {
     Header: React.FC<InterstitialScreenHeaderProps>;

package/es/components/InterstitialScreen/InterstitialScreen.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { ComposedModal } from '@carbon/react';
+import { unstable_FeatureFlags, ComposedModal } from '@carbon/react';
 import React__default, { createContext, useRef, useState, useCallback, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -50,6 +50,7 @@ let InterstitialScreen = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     interstitialAriaLabel = 'Interstitial screen',
     isFullScreen = false,
     isOpen = false,
+    launcherButtonRef,
     onClose,
     ...rest
   } = props;
@@ -84,7 +85,12 @@ let InterstitialScreen = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     // for modal only, "is-visible" triggers animation
     setIsVisibleClass(!isFullScreen && isOpen ? 'is-visible' : null);
     nextButtonRef?.current?.focus();
-  }, [isFullScreen, isOpen]);
+    if (!isOpen && launcherButtonRef) {
+      setTimeout(() => {
+        launcherButtonRef.current.focus();
+      }, 0);
+    }
+  }, [launcherButtonRef, isFullScreen, isOpen]);
 
   // hitting escape key also closes this component
   useEffect(() => {
@@ -103,7 +109,9 @@ let InterstitialScreen = /*#__PURE__*/React__default.forwardRef((props, ref) =>
     return null;
   }
   const renderModal = () => {
-    return /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
+    return /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
+      enableExperimentalFocusWrapWithoutSentinels: true
+    }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
       preventCloseOnClickOutside: true,
       className: cx(blockClass,
       // Apply the block class to the main HTML element
@@ -114,7 +122,7 @@ let InterstitialScreen = /*#__PURE__*/React__default.forwardRef((props, ref) =>
       open: isOpen,
       ref: _forwardedRef,
       "aria-label": interstitialAriaLabel
-    }, getDevtoolsProps(componentName)), children);
+    }, getDevtoolsProps(componentName)), children));
   };
   const renderFullScreen = () => {
     return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
@@ -195,6 +203,10 @@ InterstitialScreen.propTypes = {
    * Specifies whether the component is currently open.
    */
   isOpen: PropTypes.bool,
+  /**
+   * Provide a ref to return focus to once the interstitial is closed.
+   */
+  launcherButtonRef: PropTypes.any,
   /**
    * Function to call when the close button is clicked.
    */

package/es/components/InterstitialScreen/InterstitialScreenBody.js

@@ -22,7 +22,7 @@ const InterstitialScreenBody = /*#__PURE__*/React__default.forwardRef(props => {
   } = props;
   const blockClass = `${pkg.prefix}--interstitial-screen`;
   const bodyBlockClass = `${blockClass}--internal-body`;
-  const [isMultiStep, setIsMultiStep] = useState(false);
+  const [stepType, setStepType] = useState();
   const {
     setBodyChildrenData,
     bodyChildrenData,
@@ -48,12 +48,12 @@ const InterstitialScreenBody = /*#__PURE__*/React__default.forwardRef(props => {
 
     // Set body children data
     setBodyChildrenData?.(children);
-
     // If the children is an array, treat it as a multiStep
     if (isElement && Array.isArray(children)) {
-      const stepLength = children.length;
-      setIsMultiStep(!!stepLength);
-      setStepCount?.(stepLength);
+      setStepType('multi');
+      setStepCount?.(children.length);
+    } else {
+      setStepType('single');
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -78,13 +78,13 @@ const InterstitialScreenBody = /*#__PURE__*/React__default.forwardRef(props => {
     ref: bodyScrollRef
   }, rest), /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}--content`
-  }, isMultiStep ? /*#__PURE__*/React__default.createElement("div", {
+  }, stepType === 'multi' ? /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}__carousel`
   }, /*#__PURE__*/React__default.createElement(Carousel, {
     disableArrowScroll: true,
     ref: scrollRef,
     onScroll: onScrollHandler
-  }, bodyChildrenData)) : bodyChildrenData));
+  }, bodyChildrenData)) : stepType === 'single' ? bodyChildrenData : ''));
   return isFullScreen ? renderBody() : /*#__PURE__*/React__default.createElement(ModalBody, {
     className: bodyBlockClass
   }, renderBody());

package/es/components/InterstitialScreen/InterstitialScreenFooter.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useContext, useRef, useState, useMemo } from 'react';
+import React__default, { useContext, useRef, useState, useEffect, useMemo } from 'react';
 import { pkg } from '../../settings.js';
 import PropTypes from '../../_virtual/index.js';
 import { InterstitialScreenContext } from './InterstitialScreen.js';
@@ -40,6 +40,13 @@ const InterstitialScreenFooter = /*#__PURE__*/React__default.forwardRef(props =>
   const isMultiStep = !!stepCount;
   const progStepFloor = 0;
   const progStepCeil = stepCount - 1;
+  //this will focus the start button on last step when next button is hidden and start button is shown
+  useEffect(() => {
+    if (progStep + 1 === stepCount && startButtonRef.current) {
+      startButtonRef.current.focus();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [progStep]);
   const handleAction = async actionType => {
     setLoadingAction(actionType);
     await onAction?.(actionType, {

package/es/components/InterstitialScreen/InterstitialScreenHeader.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ModalHeader, ProgressIndicator, ProgressStep } from '@carbon/react';
+import { usePrefix, ModalHeader, ProgressIndicator, ProgressStep } from '@carbon/react';
 import React__default from 'react';
 import PropTypes from '../../_virtual/index.js';
 import { pkg } from '../../settings.js';
@@ -27,15 +27,17 @@ const InterstitialScreenHeader = /*#__PURE__*/React__default.forwardRef(props =>
     bodyChildrenData,
     isFullScreen,
     progStep,
-    handleClose
+    handleClose,
+    stepCount
   } = React__default.useContext(InterstitialScreenContext);
   const blockClass = `${pkg.prefix}--interstitial-screen`;
   const headerBlockClass = `${blockClass}--internal-header`;
   const _useId = useId();
+  const carbonPrefix = usePrefix();
   const headerContent = () => {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (headerTitle || headerSubTitle) && /*#__PURE__*/React__default.createElement("div", {
       className: `${blockClass}--titleContainer`
-    }, headerTitle && (_h || (_h = /*#__PURE__*/React__default.createElement("h2", null, headerTitle))), headerSubTitle && (_h2 || (_h2 = /*#__PURE__*/React__default.createElement("h3", null, headerSubTitle)))), children, !hideProgressIndicator && bodyChildrenData && Array.isArray(bodyChildrenData) && /*#__PURE__*/React__default.createElement("div", {
+    }, headerTitle && (_h || (_h = /*#__PURE__*/React__default.createElement("h1", null, headerTitle))), headerSubTitle && (_h2 || (_h2 = /*#__PURE__*/React__default.createElement("h2", null, headerSubTitle)))), children, !hideProgressIndicator && bodyChildrenData && Array.isArray(bodyChildrenData) && /*#__PURE__*/React__default.createElement("div", {
       className: `${blockClass}--progress`
     }, /*#__PURE__*/React__default.createElement(ProgressIndicator, {
       vertical: false,
@@ -49,7 +51,11 @@ const InterstitialScreenHeader = /*#__PURE__*/React__default.forwardRef(props =>
           translateWithId: child.props.translateWithId
         });
       }
-    }))));
+    })), /*#__PURE__*/React__default.createElement("div", {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      className: `${carbonPrefix}--visually-hidden`
+    }, "Step ", progStep + 1, " of ", stepCount)));
   };
   return isFullScreen ? /*#__PURE__*/React__default.createElement("header", {
     className: cx(headerBlockClass, className, {

package/es/components/PageHeader/PageHeaderUtils.js

@@ -158,7 +158,7 @@ const utilGetBreadcrumbItemForTitle = (blockClass, collapseTitle, title) => {
     if (title.text !== undefined) {
       // Shape title provided
       breadcrumbTitle = {
-        label: /*#__PURE__*/React__default.createElement("span", null, title.loading ? _SkeletonText || (_SkeletonText = /*#__PURE__*/React__default.createElement(SkeletonText, null)) : title.text),
+        label: title.loading ? _SkeletonText || (_SkeletonText = /*#__PURE__*/React__default.createElement(SkeletonText, null)) : title.text,
         title: title.text
       };
     } else if (title.content !== undefined) {
@@ -176,6 +176,7 @@ const utilGetBreadcrumbItemForTitle = (blockClass, collapseTitle, title) => {
     if (breadcrumbTitle) {
       breadcrumbTitle.key = 'breadcrumb-title';
       breadcrumbTitle.isCurrentPage = true;
+      breadcrumbTitle.href = '#';
       breadcrumbTitle.className = cx([`${blockClass}__breadcrumb-title`, {
         [`${blockClass}__breadcrumb-title--pre-collapsed`]: collapseTitle
       }]);

package/es/components/Tearsheet/TearsheetShell.js

@@ -305,7 +305,6 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
     }, /*#__PURE__*/React__default.createElement(Wrap, {
       className: `${bc}__content`,
       alwaysRender: !!(influencer && influencerPosition === 'right'),
-      tabIndex: -1,
       element: SectionLevel3
     }, children), /*#__PURE__*/React__default.createElement(Wrap, {
       className: cx({

package/es/global/js/hooks/useResizeObserver.d.ts

@@ -1,4 +1,11 @@
-export function useResizeObserver(ref: any, callback: any, deps?: any[]): {
+/**
+ * Copyright IBM Corp. 2023, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { RefObject } from 'react';
+export declare const useResizeObserver: (ref: RefObject<HTMLElement>, onResize?: (rect: DOMRectReadOnly) => void) => {
     width: number;
     height: number;
 };