@carbon/react 1.109.0-rc.0 → 1.109.0

package/es/components/ComposedModal/ComposedModal.d.ts

@@ -6,6 +6,14 @@
  */
 import React, { type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode, type RefObject } from 'react';
 export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the aria-label for the modal body when it is scrollable
+     */
+    'aria-label'?: string;
+    /**
+     * Specify the aria-labelledby for the modal body when it is scrollable
+     */
+    'aria-labelledby'?: string;
     /** Specify the content to be placed in the ModalBody. */
     children?: ReactNode;
     /**

package/es/components/ComposedModal/ComposedModal.js

@@ -18,17 +18,17 @@ import { useResizeObserver } from "../../internal/useResizeObserver.js";
 import { composeEventHandlers } from "../../tools/events.js";
 import { mergeRefs } from "../../tools/mergeRefs.js";
 import { Layer } from "../Layer/index.js";
+import { ComposedModalContext } from "./ComposedModalContext.js";
 import { ModalHeader } from "./ModalHeader.js";
 import { ModalFooter } from "./ModalFooter.js";
 import { toggleClass } from "../../tools/toggleClass.js";
-import { requiredIfGivenPropIsTruthy } from "../../prop-types/requiredIfGivenPropIsTruthy.js";
 import { elementOrParentIsFloatingMenu, wrapFocus, wrapFocusWithoutSentinels } from "../../internal/wrapFocus.js";
 import { Dialog } from "../Dialog/Dialog.js";
 import { useComposedModalState } from "./useComposedModalState.js";
 import { ComposedModalPresence, ComposedModalPresenceContext, useExclusiveComposedModalPresenceContext } from "./ComposedModalPresence.js";
 import { isTopmostVisibleModal } from "../Modal/isTopmostVisibleModal.js";
 import classNames from "classnames";
-import React, { Children, cloneElement, useContext, useEffect, useRef } from "react";
+import React, { Children, cloneElement, useContext, useEffect, useRef, useState } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useMergeRefs } from "@floating-ui/react";
@@ -39,9 +39,10 @@ import { useMergeRefs } from "@floating-ui/react";
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const ModalBody = React.forwardRef(function ModalBody({ className: customClassName, children, hasForm, hasScrollingContent, ...rest }, ref) {
+const ModalBody = React.forwardRef(function ModalBody({ ["aria-label"]: ariaLabelProp, ["aria-labelledby"]: ariaLabelledByProp, className: customClassName, children, hasForm, hasScrollingContent, ...rest }, ref) {
 	const prefix = usePrefix();
 	const contentRef = useRef(null);
+	const { labelId, titleId } = useContext(ComposedModalContext);
 	const { height } = useResizeObserver({ ref: contentRef });
 	/**
 	* isScrollable is implicitly dependent on height, when height gets updated
@@ -57,7 +58,9 @@ const ModalBody = React.forwardRef(function ModalBody({ className: customClassNa
 		}, customClassName),
 		...hasScrollingContent || isScrollable ? {
 			tabIndex: 0,
-			role: "region"
+			role: "region",
+			"aria-label": ariaLabelProp,
+			"aria-labelledby": ariaLabelledByProp || labelId || titleId
 		} : {},
 		...rest,
 		ref: mergeRefs(contentRef, ref),
@@ -65,7 +68,8 @@ const ModalBody = React.forwardRef(function ModalBody({ className: customClassNa
 	});
 });
 ModalBody.propTypes = {
-	["aria-label"]: requiredIfGivenPropIsTruthy("hasScrollingContent", PropTypes.string),
+	["aria-label"]: PropTypes.string,
+	["aria-labelledby"]: PropTypes.string,
 	children: PropTypes.node,
 	className: PropTypes.string,
 	hasForm: PropTypes.bool,
@@ -95,6 +99,8 @@ const ComposedModal = React.forwardRef(function ComposedModal({ open, ...props }
 });
 const ComposedModalDialog = React.forwardRef(function ComposedModalDialog({ ["aria-labelledby"]: ariaLabelledBy, ["aria-label"]: ariaLabel, children, className: customClassName, containerClassName, danger, decorator, isFullWidth, onClose, onKeyDown, open: externalOpen, preventCloseOnClickOutside, selectorPrimaryFocus = "[data-modal-primary-focus]", selectorsFloatingMenus, size, launcherButtonRef, slug, ...rest }, ref) {
 	const prefix = usePrefix();
+	const [labelId, setLabelId] = useState(void 0);
+	const [titleId, setTitleId] = useState(void 0);
 	const innerModal = useRef(null);
 	const button = useRef(null);
 	const startSentinel = useRef(null);
@@ -286,19 +292,28 @@ const ComposedModalDialog = React.forwardRef(function ComposedModalDialog({ ["ar
 			})
 		]
 	});
-	return /* @__PURE__ */ jsx(Layer, {
-		...rest,
-		level: 0,
-		role: "presentation",
-		ref: mergedRefs,
-		"aria-hidden": !open,
-		onBlur: handleBlur,
-		onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
-		onMouseDown: composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
-		onKeyDown: handleKeyDown,
-		className: modalClass,
-		"data-exiting": presenceContext?.isExiting || void 0,
-		children: modalBody
+	const contextValue = {
+		labelId,
+		titleId,
+		setLabelId,
+		setTitleId
+	};
+	return /* @__PURE__ */ jsx(ComposedModalContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Layer, {
+			...rest,
+			level: 0,
+			role: "presentation",
+			ref: mergedRefs,
+			"aria-hidden": !open,
+			onBlur: handleBlur,
+			onClick: composeEventHandlers([rest?.onClick, handleOnClick]),
+			onMouseDown: composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
+			onKeyDown: handleKeyDown,
+			className: modalClass,
+			"data-exiting": presenceContext?.isExiting || void 0,
+			children: modalBody
+		})
 	});
 });
 ComposedModal.propTypes = {

package/es/components/ComposedModal/ComposedModalContext.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const ComposedModalContext: import("react").Context<{
+    labelId?: string;
+    titleId?: string;
+    setLabelId?: (id: string | undefined) => void;
+    setTitleId?: (id: string | undefined) => void;
+}>;

package/es/components/ComposedModal/ComposedModalContext.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2016, 2026
+ *
+ * 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 { createContext } from "react";
+//#region src/components/ComposedModal/ComposedModalContext.ts
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const ComposedModalContext = createContext({});
+//#endregion
+export { ComposedModalContext };

package/es/components/ComposedModal/ModalHeader.js

@@ -6,9 +6,11 @@
  */
 
 import { usePrefix } from "../../internal/usePrefix.js";
+import { useId } from "../../internal/useId.js";
 import { IconButton } from "../IconButton/index.js";
+import { ComposedModalContext } from "./ComposedModalContext.js";
 import classNames from "classnames";
-import React from "react";
+import React, { useContext, useEffect } from "react";
 import PropTypes from "prop-types";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Close } from "@carbon/icons-react";
@@ -21,6 +23,30 @@ import { Close } from "@carbon/icons-react";
 */
 const ModalHeader = React.forwardRef(function ModalHeader({ buttonOnClick, children, className: customClassName, closeClassName, closeIconClassName, closeModal, iconDescription = "Close", label, labelClassName, title, titleClassName, ...rest }, ref) {
 	const prefix = usePrefix();
+	const modalId = useId();
+	const { setLabelId, setTitleId } = useContext(ComposedModalContext);
+	const generatedLabelId = `${prefix}--modal-header__label--${modalId}`;
+	const generatedTitleId = `${prefix}--modal-header__heading--${modalId}`;
+	useEffect(() => {
+		if (label && setLabelId) {
+			setLabelId(generatedLabelId);
+			return () => setLabelId(void 0);
+		}
+	}, [
+		label,
+		generatedLabelId,
+		setLabelId
+	]);
+	useEffect(() => {
+		if (title && setTitleId) {
+			setTitleId(generatedTitleId);
+			return () => setTitleId(void 0);
+		}
+	}, [
+		title,
+		generatedTitleId,
+		setTitleId
+	]);
 	function handleCloseButtonClick(evt) {
 		closeModal?.(evt);
 		buttonOnClick?.(evt);
@@ -36,10 +62,12 @@ const ModalHeader = React.forwardRef(function ModalHeader({ buttonOnClick, child
 		ref,
 		children: [
 			label && /* @__PURE__ */ jsx("h2", {
+				id: generatedLabelId,
 				className: labelClass,
 				children: label
 			}),
 			title && /* @__PURE__ */ jsx("h2", {
+				id: generatedTitleId,
 				className: titleClass,
 				children: title
 			}),

package/es/components/Modal/Modal.js

@@ -26,10 +26,10 @@ import { composeEventHandlers } from "../../tools/events.js";
 import { Layer } from "../Layer/index.js";
 import InlineLoading_default from "../InlineLoading/index.js";
 import { toggleClass } from "../../tools/toggleClass.js";
-import { requiredIfGivenPropIsTruthy } from "../../prop-types/requiredIfGivenPropIsTruthy.js";
 import { elementOrParentIsFloatingMenu, wrapFocus, wrapFocusWithoutSentinels } from "../../internal/wrapFocus.js";
 import { Dialog } from "../Dialog/Dialog.js";
 import { isTopmostVisibleModal } from "./isTopmostVisibleModal.js";
+import { requiredIfGivenPropIsTruthy } from "../../prop-types/requiredIfGivenPropIsTruthy.js";
 import { usePreviousValue } from "../../internal/usePreviousValue.js";
 import { ModalPresence, ModalPresenceContext, useExclusiveModalPresenceContext } from "./ModalPresence.js";
 import classNames from "classnames";

package/es/components/Search/Search.js

@@ -110,7 +110,7 @@ const Search$1 = React.forwardRef(({ autoComplete = "off", className, closeButto
 	});
 	return /* @__PURE__ */ jsxs("div", {
 		role: "search",
-		"aria-label": placeholder,
+		"aria-labelledby": searchId,
 		className: searchClasses,
 		children: [
 			onExpand && !isExpanded ? /* @__PURE__ */ jsx(Tooltip, {

package/lib/components/ComposedModal/ComposedModal.d.ts

@@ -6,6 +6,14 @@
  */
 import React, { type HTMLAttributes, type KeyboardEvent, type MouseEvent, type ReactNode, type RefObject } from 'react';
 export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the aria-label for the modal body when it is scrollable
+     */
+    'aria-label'?: string;
+    /**
+     * Specify the aria-labelledby for the modal body when it is scrollable
+     */
+    'aria-labelledby'?: string;
     /** Specify the content to be placed in the ModalBody. */
     children?: ReactNode;
     /**

package/lib/components/ComposedModal/ComposedModal.js

@@ -19,10 +19,10 @@ const require_useResizeObserver = require("../../internal/useResizeObserver.js")
 const require_events = require("../../tools/events.js");
 const require_mergeRefs = require("../../tools/mergeRefs.js");
 const require_index$2 = require("../Layer/index.js");
+const require_ComposedModalContext = require("./ComposedModalContext.js");
 const require_ModalHeader = require("./ModalHeader.js");
 const require_ModalFooter = require("./ModalFooter.js");
 const require_toggleClass = require("../../tools/toggleClass.js");
-const require_requiredIfGivenPropIsTruthy = require("../../prop-types/requiredIfGivenPropIsTruthy.js");
 const require_wrapFocus = require("../../internal/wrapFocus.js");
 const require_Dialog = require("../Dialog/Dialog.js");
 const require_useComposedModalState = require("./useComposedModalState.js");
@@ -43,9 +43,10 @@ let _floating_ui_react = require("@floating-ui/react");
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
-const ModalBody = react.default.forwardRef(function ModalBody({ className: customClassName, children, hasForm, hasScrollingContent, ...rest }, ref) {
+const ModalBody = react.default.forwardRef(function ModalBody({ ["aria-label"]: ariaLabelProp, ["aria-labelledby"]: ariaLabelledByProp, className: customClassName, children, hasForm, hasScrollingContent, ...rest }, ref) {
 	const prefix = require_usePrefix.usePrefix();
 	const contentRef = (0, react.useRef)(null);
+	const { labelId, titleId } = (0, react.useContext)(require_ComposedModalContext.ComposedModalContext);
 	const { height } = require_useResizeObserver.useResizeObserver({ ref: contentRef });
 	/**
 	* isScrollable is implicitly dependent on height, when height gets updated
@@ -61,7 +62,9 @@ const ModalBody = react.default.forwardRef(function ModalBody({ className: custo
 		}, customClassName),
 		...hasScrollingContent || isScrollable ? {
 			tabIndex: 0,
-			role: "region"
+			role: "region",
+			"aria-label": ariaLabelProp,
+			"aria-labelledby": ariaLabelledByProp || labelId || titleId
 		} : {},
 		...rest,
 		ref: require_mergeRefs.mergeRefs(contentRef, ref),
@@ -69,7 +72,8 @@ const ModalBody = react.default.forwardRef(function ModalBody({ className: custo
 	});
 });
 ModalBody.propTypes = {
-	["aria-label"]: require_requiredIfGivenPropIsTruthy.requiredIfGivenPropIsTruthy("hasScrollingContent", prop_types.default.string),
+	["aria-label"]: prop_types.default.string,
+	["aria-labelledby"]: prop_types.default.string,
 	children: prop_types.default.node,
 	className: prop_types.default.string,
 	hasForm: prop_types.default.bool,
@@ -99,6 +103,8 @@ const ComposedModal = react.default.forwardRef(function ComposedModal({ open, ..
 });
 const ComposedModalDialog = react.default.forwardRef(function ComposedModalDialog({ ["aria-labelledby"]: ariaLabelledBy, ["aria-label"]: ariaLabel, children, className: customClassName, containerClassName, danger, decorator, isFullWidth, onClose, onKeyDown, open: externalOpen, preventCloseOnClickOutside, selectorPrimaryFocus = "[data-modal-primary-focus]", selectorsFloatingMenus, size, launcherButtonRef, slug, ...rest }, ref) {
 	const prefix = require_usePrefix.usePrefix();
+	const [labelId, setLabelId] = (0, react.useState)(void 0);
+	const [titleId, setTitleId] = (0, react.useState)(void 0);
 	const innerModal = (0, react.useRef)(null);
 	const button = (0, react.useRef)(null);
 	const startSentinel = (0, react.useRef)(null);
@@ -290,19 +296,28 @@ const ComposedModalDialog = react.default.forwardRef(function ComposedModalDialo
 			})
 		]
 	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.Layer, {
-		...rest,
-		level: 0,
-		role: "presentation",
-		ref: mergedRefs,
-		"aria-hidden": !open,
-		onBlur: handleBlur,
-		onClick: require_events.composeEventHandlers([rest?.onClick, handleOnClick]),
-		onMouseDown: require_events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
-		onKeyDown: handleKeyDown,
-		className: modalClass,
-		"data-exiting": presenceContext?.isExiting || void 0,
-		children: modalBody
+	const contextValue = {
+		labelId,
+		titleId,
+		setLabelId,
+		setTitleId
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ComposedModalContext.ComposedModalContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.Layer, {
+			...rest,
+			level: 0,
+			role: "presentation",
+			ref: mergedRefs,
+			"aria-hidden": !open,
+			onBlur: handleBlur,
+			onClick: require_events.composeEventHandlers([rest?.onClick, handleOnClick]),
+			onMouseDown: require_events.composeEventHandlers([rest?.onMouseDown, handleOnMouseDown]),
+			onKeyDown: handleKeyDown,
+			className: modalClass,
+			"data-exiting": presenceContext?.isExiting || void 0,
+			children: modalBody
+		})
 	});
 });
 ComposedModal.propTypes = {

package/lib/components/ComposedModal/ComposedModalContext.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export declare const ComposedModalContext: import("react").Context<{
+    labelId?: string;
+    titleId?: string;
+    setLabelId?: (id: string | undefined) => void;
+    setTitleId?: (id: string | undefined) => void;
+}>;

package/lib/components/ComposedModal/ComposedModalContext.js

@@ -0,0 +1,18 @@
+/**
+ * Copyright IBM Corp. 2016, 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+require("../../_virtual/_rolldown/runtime.js");
+//#region src/components/ComposedModal/ComposedModalContext.ts
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const ComposedModalContext = (0, require("react").createContext)({});
+//#endregion
+exports.ComposedModalContext = ComposedModalContext;

package/lib/components/ComposedModal/ModalHeader.js

@@ -7,7 +7,9 @@
 
 const require_runtime = require("../../_virtual/_rolldown/runtime.js");
 const require_usePrefix = require("../../internal/usePrefix.js");
+const require_useId = require("../../internal/useId.js");
 const require_index = require("../IconButton/index.js");
+const require_ComposedModalContext = require("./ComposedModalContext.js");
 let classnames = require("classnames");
 classnames = require_runtime.__toESM(classnames);
 let react = require("react");
@@ -25,6 +27,30 @@ let _carbon_icons_react = require("@carbon/icons-react");
 */
 const ModalHeader = react.default.forwardRef(function ModalHeader({ buttonOnClick, children, className: customClassName, closeClassName, closeIconClassName, closeModal, iconDescription = "Close", label, labelClassName, title, titleClassName, ...rest }, ref) {
 	const prefix = require_usePrefix.usePrefix();
+	const modalId = require_useId.useId();
+	const { setLabelId, setTitleId } = (0, react.useContext)(require_ComposedModalContext.ComposedModalContext);
+	const generatedLabelId = `${prefix}--modal-header__label--${modalId}`;
+	const generatedTitleId = `${prefix}--modal-header__heading--${modalId}`;
+	(0, react.useEffect)(() => {
+		if (label && setLabelId) {
+			setLabelId(generatedLabelId);
+			return () => setLabelId(void 0);
+		}
+	}, [
+		label,
+		generatedLabelId,
+		setLabelId
+	]);
+	(0, react.useEffect)(() => {
+		if (title && setTitleId) {
+			setTitleId(generatedTitleId);
+			return () => setTitleId(void 0);
+		}
+	}, [
+		title,
+		generatedTitleId,
+		setTitleId
+	]);
 	function handleCloseButtonClick(evt) {
 		closeModal?.(evt);
 		buttonOnClick?.(evt);
@@ -40,10 +66,12 @@ const ModalHeader = react.default.forwardRef(function ModalHeader({ buttonOnClic
 		ref,
 		children: [
 			label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				id: generatedLabelId,
 				className: labelClass,
 				children: label
 			}),
 			title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+				id: generatedTitleId,
 				className: titleClass,
 				children: title
 			}),

package/lib/components/Modal/Modal.js

@@ -27,10 +27,10 @@ const require_events = require("../../tools/events.js");
 const require_index$5 = require("../Layer/index.js");
 const require_index$6 = require("../InlineLoading/index.js");
 const require_toggleClass = require("../../tools/toggleClass.js");
-const require_requiredIfGivenPropIsTruthy = require("../../prop-types/requiredIfGivenPropIsTruthy.js");
 const require_wrapFocus = require("../../internal/wrapFocus.js");
 const require_Dialog = require("../Dialog/Dialog.js");
 const require_isTopmostVisibleModal = require("./isTopmostVisibleModal.js");
+const require_requiredIfGivenPropIsTruthy = require("../../prop-types/requiredIfGivenPropIsTruthy.js");
 const require_usePreviousValue = require("../../internal/usePreviousValue.js");
 const require_ModalPresence = require("./ModalPresence.js");
 let classnames = require("classnames");

package/lib/components/Search/Search.js

@@ -114,7 +114,7 @@ const Search = react.default.forwardRef(({ autoComplete = "off", className, clos
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		role: "search",
-		"aria-label": placeholder,
+		"aria-labelledby": searchId,
 		className: searchClasses,
 		children: [
 			onExpand && !isExpanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.109.0-rc.0",
+  "version": "1.109.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -53,9 +53,9 @@
   "dependencies": {
     "@babel/runtime": "^7.27.3",
     "@carbon/feature-flags": "^1.3.0",
-    "@carbon/icons-react": "^11.82.0-rc.0",
+    "@carbon/icons-react": "^11.82.0",
     "@carbon/layout": "^11.53.0",
-    "@carbon/styles": "^1.108.0-rc.0",
+    "@carbon/styles": "^1.108.0",
     "@carbon/utilities": "^0.20.0",
     "@floating-ui/react": "^0.27.4",
     "@ibm/telemetry-js": "^1.5.0",
@@ -79,7 +79,7 @@
     "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@carbon/test-utils": "^10.41.0",
-    "@carbon/themes": "^11.75.0-rc.0",
+    "@carbon/themes": "^11.75.0",
     "@figma/code-connect": "^1.4.5",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/addon-a11y": "^10.3.5",
@@ -112,7 +112,7 @@
     "tsdown": "^0.21.0",
     "typescript-config-carbon": "^0.10.0",
     "use-sync-external-store": "^1.5.0",
-    "vite": "^7.1.2"
+    "vite": "^8.0.0"
   },
   "sideEffects": [
     "es/index.js",
@@ -125,5 +125,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "b23ca747c33b76557a54aa88b6df70bc76f55da9"
+  "gitHead": "5bb41d341768785b898851fde30731cb31b981c2"
 }