stream-chat-react 14.7.0 → 14.9.0

package/dist/cjs/{useChannelHeaderOnlineStatus.d39ede24.js → useChannelHeaderOnlineStatus.72753090.js}

@@ -1,4 +1,4 @@
-const require_useNotificationApi = require("./useNotificationApi.87ba0b39.js");
+const require_useNotificationApi = require("./useNotificationApi.bf76a16b.js");
 let react = require("react");
 react = require_useNotificationApi.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
@@ -13,6 +13,10 @@ react_markdown = require_useNotificationApi.__toESM(react_markdown);
 let remark_gfm = require("remark-gfm");
 remark_gfm = require_useNotificationApi.__toESM(remark_gfm);
 let _braintree_sanitize_url = require("@braintree/sanitize-url");
+let mdast_util_to_string = require("mdast-util-to-string");
+let remark_parse = require("remark-parse");
+remark_parse = require_useNotificationApi.__toESM(remark_parse);
+let unified = require("unified");
 //#region src/context/MessageContext.tsx
 var MessageContext = react.default.createContext(void 0);
 var MessageProvider = ({ children, value }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageContext.Provider, {
@@ -111,6 +115,84 @@ var useModalContext = () => {
 	return contextValue;
 };
 //#endregion
+//#region src/components/Accessibility/AriaLiveOutletContext.ts
+var AriaLiveOutletContext = (0, react.createContext)(void 0);
+var useAriaLiveOutletContext = () => (0, react.useContext)(AriaLiveOutletContext);
+//#endregion
+//#region src/components/VisuallyHidden/VisuallyHidden.tsx
+var visuallyHiddenStyle = {
+	border: 0,
+	clip: "rect(0, 0, 0, 0)",
+	height: "1px",
+	margin: "-1px",
+	overflow: "hidden",
+	padding: 0,
+	position: "absolute",
+	whiteSpace: "nowrap",
+	width: "1px"
+};
+/**
+* Hides content visually while preserving it for assistive technologies.
+*/
+var VisuallyHidden = ({ children, style, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+	...rest,
+	style: {
+		...visuallyHiddenStyle,
+		...style
+	},
+	children
+});
+//#endregion
+//#region src/components/Accessibility/AriaLiveOutlet.tsx
+/**
+* Dumb render target for the unified announcer. Registers itself with the nearest
+* {@link AriaLiveAnnouncerProvider} and renders the polite/assertive live regions ONLY when
+* it is the active (innermost) outlet, so exactly one region is live at a time — always in
+* the active accessibility-tree scope. Mount one at the `Chat` root and one inside each
+* `aria-modal` dialog (with a higher `layer`).
+*/
+var AriaLiveOutlet = ({ layer = 0, portal = false }) => {
+	const context = useAriaLiveOutletContext();
+	const idRef = (0, react.useRef)(null);
+	if (idRef.current === null) idRef.current = Symbol("aria-live-outlet");
+	const registerOutlet = context?.registerOutlet;
+	const unregisterOutlet = context?.unregisterOutlet;
+	(0, react.useEffect)(() => {
+		const id = idRef.current;
+		if (!id || !registerOutlet || !unregisterOutlet) return;
+		registerOutlet(id, layer);
+		return () => unregisterOutlet(id);
+	}, [
+		layer,
+		registerOutlet,
+		unregisterOutlet
+	]);
+	const getPortalDestination = (0, react.useCallback)(() => document.body, []);
+	if (!context || context.activeOutletId !== idRef.current) return null;
+	const { announcementsByPriority } = context;
+	const liveRegions = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(VisuallyHidden, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-atomic": "false",
+		"aria-live": "polite",
+		"aria-relevant": "additions",
+		"data-testid": "str-chat__aria-live-region--polite",
+		role: "status",
+		children: announcementsByPriority.polite.map((announcement) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: announcement.message }, announcement.id))
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		"aria-atomic": "false",
+		"aria-live": "assertive",
+		"aria-relevant": "additions",
+		"data-testid": "str-chat__aria-live-region--assertive",
+		role: "alert",
+		children: announcementsByPriority.assertive.map((announcement) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { children: announcement.message }, announcement.id))
+	})] });
+	if (!portal) return liveRegions;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Portal, {
+		getPortalDestination,
+		isOpen: true,
+		children: liveRegions
+	});
+};
+//#endregion
 //#region src/components/Notifications/NotificationConfigurationContext.tsx
 var defaultNotificationDisplayFilter = () => true;
 var defaultNotificationConfigurationContextValue = { displayFilter: defaultNotificationDisplayFilter };
@@ -422,7 +504,7 @@ var DialogAnchor = ({ allowFlip = true, children, className, closeOnClickOutside
 			autoFocus: focus,
 			contain: trapFocus,
 			restoreFocus: true,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 				...anchorDivProps,
 				"aria-describedby": ariaDescribedBy,
 				"aria-label": resolvedAriaLabel,
@@ -436,7 +518,7 @@ var DialogAnchor = ({ allowFlip = true, children, className, closeOnClickOutside
 				role: resolvedRole,
 				style: styles,
 				tabIndex: typeof tabIndex !== "undefined" ? tabIndex : 0,
-				children
+				children: [children, resolvedAriaModal && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AriaLiveOutlet, { layer: 1 })]
 			})
 		})
 	});
@@ -643,6 +725,7 @@ var UserContextMenuButton = ({ children, className, imageUrl, role = "menuitem",
 	role,
 	type: "button",
 	children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Avatar, {
+		"aria-hidden": true,
 		imageUrl,
 		size: "sm",
 		userName
@@ -787,13 +870,28 @@ var ContextMenuButton = (props) => {
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(BaseContextMenuButton, { ...buttonProps });
 };
-var ContextMenuBackButton = ({ children, className, role = "menuitem", ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-	...props,
-	className: (0, clsx.default)("str-chat__context-menu__back-button", className),
-	role,
-	type: "button",
-	children
-});
+var ContextMenuBackButton = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, role = "menuitem", ...props }) => {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const generatedBackNavigationLabelId = require_useNotificationApi.useStableId();
+	const generatedVisibleLabelId = require_useNotificationApi.useStableId();
+	const resolvedAriaLabel = ariaLabel ?? t("aria/Back to parent menu button");
+	const resolvedAriaLabelledBy = ariaLabelledBy ?? `${generatedVisibleLabelId} ${generatedBackNavigationLabelId}`;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+		...props,
+		"aria-labelledby": resolvedAriaLabelledBy,
+		className: (0, clsx.default)("str-chat__context-menu__back-button", className),
+		role,
+		type: "button",
+		children: [!ariaLabelledBy && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VisuallyHidden, {
+			id: generatedBackNavigationLabelId,
+			children: resolvedAriaLabel
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: "str-chat__context-menu__back-button__content",
+			id: generatedVisibleLabelId,
+			children
+		})]
+	});
+};
 var ContextMenuHeader = ({ children, className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	...props,
 	className: (0, clsx.default)("str-chat__context-menu__header", className),
@@ -841,6 +939,13 @@ var resolveContextMenuFocusRestoreTarget = ({ contextMenuRoot, request }) => {
 	if (request.index >= 0) return getVisibleContextMenuKeyboardNavigationItems(contextMenuRoot)[request.index] ?? null;
 	return null;
 };
+var CONTEXT_MENU_HEADER_SELECTOR = ".str-chat__context-menu__header";
+var resolveSubmenuInitialFocusTarget = ({ contextMenuRoot, initialFocus, itemSelector }) => {
+	if (initialFocus === "none") return null;
+	const items = getVisibleContextMenuKeyboardNavigationItems(contextMenuRoot, itemSelector);
+	if (initialFocus === "first") return items[0] ?? null;
+	return items.find((item) => !item.closest(CONTEXT_MENU_HEADER_SELECTOR)) ?? items[0] ?? null;
+};
 var ContextMenuContext = react.default.createContext(void 0);
 var useContextMenuContext = () => (0, react.useContext)(ContextMenuContext);
 /**
@@ -850,7 +955,10 @@ var useContextMenuContext = () => (0, react.useContext)(ContextMenuContext);
 * customize submenu/back navigation behavior while keeping the same anchor/focus
 * handling from `ContextMenu`.
 */
-function ContextMenuContent({ anchorReferenceElement, backLabel = "Back", children, className, enableAnimations = true, Header, items, ItemsWrapper, keyboardNavigation, menuClassName, onClose, onMenuLevelChange, transitionDirection, ...props }) {
+function ContextMenuContent({ anchorReferenceElement, backButtonAriaLabel, backLabel, children, className, enableAnimations = true, Header, items, ItemsWrapper, keyboardNavigation, menuClassName, onClose, onMenuLevelChange, transitionDirection, ...props }) {
+	const { t } = require_useNotificationApi.useTranslationContext();
+	const resolvedBackLabel = backLabel ?? t("Back");
+	const { ["aria-describedby"]: rootAriaDescribedBy, ["aria-label"]: rootAriaLabel, ["aria-labelledby"]: rootAriaLabelledBy, ...contextMenuRootProps } = props;
 	const rootLevel = (0, react.useMemo)(() => ({
 		Header,
 		items,
@@ -866,18 +974,23 @@ function ContextMenuContent({ anchorReferenceElement, backLabel = "Back", childr
 	const [menuBodyAnimationKey, setMenuBodyAnimationKey] = (0, react.useState)(0);
 	const contextMenuRootRef = (0, react.useRef)(null);
 	const focusRestoreRequestRef = (0, react.useRef)(null);
+	const pendingForwardFocusRef = (0, react.useRef)(null);
 	const activeMenu = menuStack[menuStack.length - 1];
+	const keyboardNavigationItemSelector = keyboardNavigation?.itemSelector ?? DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR;
 	const ActiveMenuItemsWrapper = activeMenu.ItemsWrapper ?? react.default.Fragment;
 	const closeMenu = (0, react.useCallback)(() => {
 		onClose?.();
 	}, [onClose]);
-	const openSubmenu = (0, react.useCallback)(({ focusReturnTarget, Header, ItemsWrapper: SubmenuItemsWrapper, menuClassName, Submenu }) => {
+	const openSubmenu = (0, react.useCallback)(({ focusReturnTarget, Header, initialFocus = "first-item", ItemsWrapper: SubmenuItemsWrapper, menuClassName, Submenu }) => {
+		pendingForwardFocusRef.current = initialFocus;
+		focusRestoreRequestRef.current = null;
 		const nextLevel = {
 			focusRestoreRequest: createContextMenuFocusRestoreRequest({
 				contextMenuRoot: contextMenuRootRef.current,
 				focusReturnTarget
 			}),
 			Header,
+			initialFocus,
 			ItemsWrapper: SubmenuItemsWrapper ?? ItemsWrapper,
 			menuClassName,
 			Submenu
@@ -888,6 +1001,7 @@ function ContextMenuContent({ anchorReferenceElement, backLabel = "Back", childr
 		setMenuStack((current) => {
 			if (current.length <= 1) return current;
 			focusRestoreRequestRef.current = current[current.length - 1]?.focusRestoreRequest ?? null;
+			pendingForwardFocusRef.current = null;
 			return current.slice(0, -1);
 		});
 	}, []);
@@ -900,17 +1014,24 @@ function ContextMenuContent({ anchorReferenceElement, backLabel = "Back", childr
 	(0, react.useEffect)(() => {
 		onMenuLevelChange?.(menuStack.length);
 	}, [menuStack.length, onMenuLevelChange]);
-	(0, react.useEffect)(() => {
+	(0, react.useLayoutEffect)(() => {
 		const focusRestoreRequest = focusRestoreRequestRef.current;
-		if (!focusRestoreRequest) return;
-		focusRestoreRequestRef.current = null;
-		requestAnimationFrame(() => {
-			resolveContextMenuFocusRestoreTarget({
-				contextMenuRoot: contextMenuRootRef.current,
-				request: focusRestoreRequest
-			})?.focus();
-		});
-	}, [menuStack.length]);
+		const pendingForwardFocus = pendingForwardFocusRef.current;
+		if (!focusRestoreRequest && !pendingForwardFocus) return;
+		const contextMenuRoot = contextMenuRootRef.current;
+		(focusRestoreRequest ? resolveContextMenuFocusRestoreTarget({
+			contextMenuRoot,
+			request: focusRestoreRequest
+		}) : resolveSubmenuInitialFocusTarget({
+			contextMenuRoot,
+			initialFocus: pendingForwardFocus,
+			itemSelector: keyboardNavigationItemSelector
+		}))?.focus();
+	}, [
+		keyboardNavigationItemSelector,
+		menuBodyAnimationKey,
+		menuStack.length
+	]);
 	(0, react.useEffect)(() => {
 		if (!transitionDirection) return;
 		setMenuBodyAnimationKey((value) => value + 1);
@@ -922,10 +1043,7 @@ function ContextMenuContent({ anchorReferenceElement, backLabel = "Back", childr
 	const unregisterDialogSubmenu = (0, react.useCallback)(() => {
 		dialogSubmenuOpenCountRef.current = Math.max(0, dialogSubmenuOpenCountRef.current - 1);
 	}, []);
-	const rovingFocusKeyDownHandler = (0, react.useMemo)(() => {
-		const itemSelector = keyboardNavigation?.itemSelector ?? DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR;
-		return createRovingFocusKeyDownHandler({ getItems: (event) => getVisibleContextMenuKeyboardNavigationItems(event.currentTarget, itemSelector) });
-	}, [keyboardNavigation]);
+	const rovingFocusKeyDownHandler = (0, react.useMemo)(() => createRovingFocusKeyDownHandler({ getItems: (event) => getVisibleContextMenuKeyboardNavigationItems(event.currentTarget, keyboardNavigationItemSelector) }), [keyboardNavigationItemSelector]);
 	const escapeConsumedRef = (0, react.useRef)(false);
 	const keyboardNavigationHandler = (0, react.useCallback)((event) => {
 		if (event.key === "Escape") {
@@ -951,6 +1069,7 @@ function ContextMenuContent({ anchorReferenceElement, backLabel = "Back", childr
 			event.stopPropagation();
 		}
 	}, []);
+	const isSubmenuLevel = menuStack.length > 1;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuContext.Provider, {
 		value: {
 			anchorReferenceElement,
@@ -961,15 +1080,19 @@ function ContextMenuContent({ anchorReferenceElement, backLabel = "Back", childr
 			unregisterDialogSubmenu
 		},
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContextMenuRoot, {
+			"aria-describedby": isSubmenuLevel ? void 0 : rootAriaDescribedBy,
+			"aria-label": isSubmenuLevel ? t("aria/Submenu") : rootAriaLabel,
+			"aria-labelledby": isSubmenuLevel ? void 0 : rootAriaLabelledBy,
 			className: (0, clsx.default)(className, activeMenu.menuClassName),
 			"data-str-chat-enable-animations": enableAnimations,
 			onKeyDownCapture: keyboardNavigationHandler,
 			onKeyUpCapture: suppressEscapeKeyUp,
 			ref: contextMenuRootRef,
-			...props,
+			...contextMenuRootProps,
 			children: [activeMenu.Header ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(activeMenu.Header, {}) : menuStack.length > 1 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuHeader, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ContextMenuBackButton, {
+				"aria-label": backButtonAriaLabel,
 				onClick: returnToParentMenu,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconChevronLeft, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: backLabel })]
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.IconChevronLeft, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: resolvedBackLabel })]
 			}) }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ContextMenuBody, {
 				className: (0, clsx.default)({
 					"str-chat__context-menu__body--submenu-backward": transitionDirection === "backward",
@@ -1074,9 +1197,13 @@ var ContextMenu = (props) => {
 		transitionDirection
 	});
 	if (isAnchored) {
-		const { backLabel: _b, enableAnimations: _ea, Header: _h, items: _i, ItemsWrapper: _w, keyboardNavigation: _kn, menuClassName: _m, onClose: _c, role: _r, ...anchorDivProps } = menuProps;
+		const { ["aria-describedby"]: ariaDescribedBy, ["aria-label"]: ariaLabel, ["aria-labelledby"]: ariaLabelledBy, backButtonAriaLabel: _bbal, backLabel: _b, enableAnimations: _ea, Header: _h, items: _i, ItemsWrapper: _w, keyboardNavigation: _kn, menuClassName: _m, onClose: _c, role: _r, ...anchorDivProps } = menuProps;
+		const isSubmenuLevel = menuLevel > 1;
 		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DialogAnchor, {
 			allowFlip,
+			"aria-describedby": isSubmenuLevel ? void 0 : ariaDescribedBy,
+			"aria-label": isSubmenuLevel ? void 0 : ariaLabel,
+			"aria-labelledby": isSubmenuLevel ? void 0 : ariaLabelledBy,
 			closeOnClickOutside,
 			closeTransitionMs,
 			dialogManagerId,
@@ -1147,8 +1274,7 @@ var PromptHeader = ({ className, close, description, descriptionId, goBack, Lead
 				className: "str-chat__prompt__header__trailing-content",
 				children: [TrailingContent && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrailingContent, {}), close && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.Button, {
 					appearance: "ghost",
-					"aria-describedby": hasDescription ? resolvedDescriptionId : void 0,
-					"aria-label": typeof title === "string" ? t("Close prompt: {{ title }}", { title }) : t("Close"),
+					"aria-label": t("Close"),
 					circular: true,
 					className: "str-chat__prompt__header__close-button",
 					onClick: close,
@@ -1224,19 +1350,21 @@ var useResolvedModalAriaProps = ({ ariaDescribedby, ariaLabel, ariaLabelledby, d
 };
 //#endregion
 //#region src/components/Modal/GlobalModal.tsx
-var GlobalModal = ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, className, CloseButtonOnOverlay, dialogId, dialogRootProps, onClose, onCloseAttempt, open, role = "dialog" }) => {
+var GlobalModal = ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, children, className, CloseButtonOnOverlay, dialogId, dialogRootProps, getInitialFocusElement, initialFocusStrategy, onClose, onCloseAttempt, open, role = "dialog" }) => {
 	const generatedDialogId = require_useNotificationApi.useStableId();
 	const resolvedDialogId = dialogId ?? `modal-dialog-${generatedDialogId}`;
 	const dialog = require_useNotificationApi.useModalDialog(resolvedDialogId);
 	const isOpen = require_useNotificationApi.useModalDialogIsOpen(resolvedDialogId);
 	const isTopmost = require_useNotificationApi.useModalDialogIsTopmost(resolvedDialogId);
 	const overlayRef = (0, react.useRef)(null);
+	const dialogRef = (0, react.useRef)(null);
 	const closeButtonRef = (0, react.useRef)(null);
 	const closingRef = (0, react.useRef)(false);
 	const { theme } = require_useNotificationApi.useChatContext();
 	const { NotificationList: NotificationList$1 = NotificationList } = require_useNotificationApi.useComponentContext();
 	const { className: dialogRootClassName, onKeyDown: dialogRootOnKeyDown, ...dialogRootPropsRest } = dialogRootProps ?? {};
-	const dialogLabelingBaseId = dialog.id;
+	const dialogLabelingBaseId = resolvedDialogId;
+	const resolvedInitialFocusStrategy = initialFocusStrategy ?? "firstElement";
 	const resolvedModalAriaProps = useResolvedModalAriaProps({
 		ariaDescribedby,
 		ariaLabel,
@@ -1269,8 +1397,18 @@ var GlobalModal = ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabe
 	};
 	const handleDialogKeyDown = (event) => {
 		dialogRootOnKeyDown?.(event);
-		if (event.defaultPrevented || event.key !== "Escape" || !isTopmost) return;
-		maybeClose("escape", event);
+		if (event.defaultPrevented || !isTopmost) return;
+		if (event.key === "Escape") {
+			maybeClose("escape", event);
+			return;
+		}
+		if (event.key === "Enter" && event.target === dialogRef.current) {
+			const target = dialogRef.current?.querySelector("[data-autofocus]");
+			if (target) {
+				event.preventDefault();
+				target.focus();
+			}
+		}
 	};
 	(0, react.useEffect)(() => {
 		if (!open) {
@@ -1284,6 +1422,21 @@ var GlobalModal = ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabe
 		isOpen,
 		open
 	]);
+	(0, react.useEffect)(() => {
+		if (!open || !isOpen || !isTopmost || !getInitialFocusElement && resolvedInitialFocusStrategy === "firstElement") return;
+		const frame = requestAnimationFrame(() => {
+			const dialogElement = dialogRef.current;
+			if (!dialogElement) return;
+			(getInitialFocusElement?.(dialogElement) ?? dialogElement).focus();
+		});
+		return () => cancelAnimationFrame(frame);
+	}, [
+		getInitialFocusElement,
+		isOpen,
+		isTopmost,
+		open,
+		resolvedInitialFocusStrategy
+	]);
 	if (!open || !isOpen) return null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.DialogPortalEntry, {
 		dialogId: resolvedDialogId,
@@ -1296,7 +1449,7 @@ var GlobalModal = ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabe
 				ref: overlayRef,
 				children: [
 					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_react_aria_focus.FocusScope, {
-						autoFocus: isTopmost,
+						autoFocus: isTopmost && !getInitialFocusElement && resolvedInitialFocusStrategy === "firstElement",
 						contain: isTopmost,
 						restoreFocus: true,
 						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
@@ -1308,15 +1461,16 @@ var GlobalModal = ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabe
 							className: (0, clsx.default)("str-chat__modal__dialog", dialogRootClassName),
 							inert: isTopmost ? void 0 : true,
 							onKeyDown: handleDialogKeyDown,
+							ref: dialogRef,
 							role,
 							tabIndex: isTopmost ? 0 : -1,
-							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_useNotificationApi.DialogManagerProvider, {
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_useNotificationApi.DialogManagerProvider, {
 								id: `${resolvedDialogId}-floating-dialog-manager`,
 								portalDestinationProps: {
 									captureOutsideClicks: true,
 									className: "str-chat__modal__floating-dialog-overlay"
 								},
-								children
+								children: [children, isTopmost && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AriaLiveOutlet, { layer: 1 })]
 							})
 						})
 					}),
@@ -2388,7 +2542,7 @@ var GalleryHeader = ({ currentItem }) => {
 };
 //#endregion
 //#region src/components/VideoPlayer/VideoPlayer.tsx
-var ReactPlayer = react.default.lazy(() => Promise.resolve().then(() => require("./ReactPlayerWrapper.c340ab05.js")));
+var ReactPlayer = react.default.lazy(() => Promise.resolve().then(() => require("./ReactPlayerWrapper.60a93742.js")));
 var VideoPlayer = ({ isPlaying, thumbnailUrl, videoUrl }) => {
 	const { LoadingIndicator: LoadingIndicator$1 = LoadingIndicator, VideoPlayer: VideoPlayerContext } = require_useNotificationApi.useComponentContext();
 	return VideoPlayerContext ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(VideoPlayerContext, {
@@ -2680,13 +2834,28 @@ var SwitchField = ({ children, description, fieldClassName, title, ...props }) =
 	const switchId = id ?? `str-chat__switch-field-${generatedSwitchId}`;
 	const switchLabelId = `${switchId}-label`;
 	const inputRef = (0, react.useRef)(null);
+	const announce = (0, react.useContext)(require_useNotificationApi.AriaLiveAnnouncerContext)?.announce;
+	const { t } = require_useNotificationApi.useTranslationContext("SwitchField");
 	const [uncontrolledChecked, setUncontrolledChecked] = (0, react.useState)(Boolean(defaultChecked));
 	const isControlled = checked !== void 0;
 	const isOn = isControlled ? checked : uncontrolledChecked;
 	const isReadOnly = isControlled && onChange === void 0;
+	const childLabelId = ((0, react.isValidElement)(children) ? children : void 0)?.props.id;
+	const resolvedAriaLabelledBy = ariaLabelledBy ?? (!ariaLabel ? title ? switchLabelId : childLabelId : void 0);
+	const resolveAnnouncementName = () => {
+		if (title) return title;
+		if (ariaLabel) return ariaLabel;
+		if (resolvedAriaLabelledBy) {
+			const labelEl = document.getElementById(resolvedAriaLabelledBy);
+			return ((labelEl?.querySelector(".str-chat__form__switch-field__label__text"))?.textContent || labelEl?.textContent || "").trim() || void 0;
+		}
+	};
 	const handleChange = (event) => {
 		if (!isControlled) setUncontrolledChecked(event.target.checked);
 		onChange?.(event);
+		const setting = resolveAnnouncementName();
+		if (!announce || !setting) return;
+		announce(event.target.checked ? t("aria/{{ setting }} enabled", { setting }) : t("aria/{{ setting }} disabled", { setting }), { priority: "polite" });
 	};
 	const handleKeyDown = (event) => {
 		onKeyDown?.(event);
@@ -2698,8 +2867,6 @@ var SwitchField = ({ children, description, fieldClassName, title, ...props }) =
 		if (disabled || event.target === inputRef.current) return;
 		inputRef.current?.click();
 	};
-	const childLabelId = ((0, react.isValidElement)(children) ? children : void 0)?.props.id;
-	const resolvedAriaLabelledBy = ariaLabelledBy ?? (!ariaLabel ? title ? switchLabelId : childLabelId : void 0);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, clsx.default)("str-chat__form__switch-field", fieldClassName, disabled && "str-chat__form__switch-field--disabled"),
 		children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SwitchFieldLabel, {
@@ -2839,7 +3006,6 @@ var TextInput = (0, react.forwardRef)(function TextInput({ className, disabled,
 					className: "str-chat__form-text-input__control-row",
 					children: [
 						leading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							"aria-hidden": true,
 							className: "str-chat__form-text-input__leading",
 							children: leading
 						}) : null,
@@ -2858,7 +3024,6 @@ var TextInput = (0, react.forwardRef)(function TextInput({ className, disabled,
 							children: trailingText
 						}) : null,
 						trailing ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
-							"aria-hidden": true,
 							className: "str-chat__form-text-input__trailing",
 							children: trailing
 						}) : null
@@ -2938,6 +3103,16 @@ var renderPreviewText = (text) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(rea
 	skipHtml: true,
 	children: text
 });
+var createPlainTextProcessor = () => (0, unified.unified)().use(remark_parse.default).use(remarkPlugins);
+var plainTextProcessor;
+var stripMarkdownToText = (text) => {
+	try {
+		const processor = plainTextProcessor ?? (plainTextProcessor = createPlainTextProcessor());
+		return (0, mdast_util_to_string.toString)(processor.runSync(processor.parse(text))) || text;
+	} catch {
+		return text;
+	}
+};
 var getLatestPollVote = (latestVotesByOption) => {
 	let latestVote;
 	for (const optionVotes of Object.values(latestVotesByOption)) optionVotes.forEach((vote) => {
@@ -2946,32 +3121,130 @@ var getLatestPollVote = (latestVotesByOption) => {
 	});
 	return latestVote;
 };
-var getLatestMessagePreview = (channel, t, userLanguage = "en", isMessageAIGenerated) => {
-	const latestMessage = channel.state.latestMessages[channel.state.latestMessages.length - 1];
+/**
+* Resolves the channel's latest-message preview once: the localized DISPLAY string, a `kind`
+* discriminant, and the bits announcements need (poll question, attachment type). Single source of
+* truth for the display variant ({@link getLatestMessagePreview}) and the announcement variant
+* ({@link getLatestMessagePreviewText}), so the translation lookup and branching run once per call.
+*/
+var getLatestMessagePreviewParts = (channel, t, userLanguage = "en", latestMessageArg) => {
+	const latestMessage = latestMessageArg ?? channel.state.latestMessages[channel.state.latestMessages.length - 1];
 	const previewTextToRender = getTranslatedMessageText({
 		language: userLanguage,
 		message: latestMessage
 	}) || latestMessage?.text;
 	const poll = latestMessage?.poll;
-	if (!latestMessage) return t("Nothing yet...");
-	if (require_useNotificationApi.isMessageDeleted(latestMessage)) return t("Message deleted");
-	if (poll) if (!poll.vote_count) return t("📊 {{createdBy}} created: {{ pollName}}", {
-		createdBy: poll.created_by?.id === channel.getClient().userID ? t("You") : poll.created_by?.name ?? t("Poll"),
-		pollName: poll.name
-	});
-	else {
+	if (!latestMessage) return {
+		isUserMessageText: false,
+		kind: "empty",
+		latestMessage,
+		text: t("Nothing yet...")
+	};
+	if (require_useNotificationApi.isMessageDeleted(latestMessage)) return {
+		isUserMessageText: false,
+		kind: "deleted",
+		latestMessage,
+		text: t("Message deleted")
+	};
+	if (poll) if (!poll.vote_count) {
+		const createdBy = poll.created_by?.id === channel.getClient().userID ? t("You") : poll.created_by?.name ?? t("Poll");
+		return {
+			isUserMessageText: false,
+			kind: "poll",
+			latestMessage,
+			pollName: poll.name,
+			text: t("📊 {{createdBy}} created: {{ pollName}}", {
+				createdBy,
+				pollName: poll.name
+			})
+		};
+	} else {
 		const latestVote = getLatestPollVote(poll.latest_votes_by_option);
 		const option = latestVote && poll.options.find((opt) => opt.id === latestVote.option_id);
-		if (option && latestVote) return t("📊 {{votedBy}} voted: {{pollOptionText}}", {
-			pollOptionText: option.text,
-			votedBy: latestVote?.user?.id === channel.getClient().userID ? t("You") : latestVote.user?.name ?? t("Poll")
-		});
+		if (option && latestVote) return {
+			isUserMessageText: false,
+			kind: "poll",
+			latestMessage,
+			pollName: poll.name,
+			text: t("📊 {{votedBy}} voted: {{pollOptionText}}", {
+				pollOptionText: option.text,
+				votedBy: latestVote?.user?.id === channel.getClient().userID ? t("You") : latestVote.user?.name ?? t("Poll")
+			})
+		};
+	}
+	if (previewTextToRender) return {
+		isUserMessageText: true,
+		kind: "text",
+		latestMessage,
+		text: previewTextToRender
+	};
+	if (latestMessage.command) return {
+		isUserMessageText: false,
+		kind: "command",
+		latestMessage,
+		text: `/${latestMessage.command}`
+	};
+	if (latestMessage.attachments?.length) return {
+		isUserMessageText: false,
+		kind: "attachment",
+		latestMessage,
+		text: t("🏙 Attachment...")
+	};
+	if (latestMessage.shared_location) return {
+		isUserMessageText: false,
+		kind: "location",
+		latestMessage,
+		text: t("📍Shared location")
+	};
+	return {
+		isUserMessageText: false,
+		kind: "text",
+		latestMessage,
+		text: t("Empty message...")
+	};
+};
+/**
+* Maps a known attachment `type` to a localized, human-readable word (e.g. "image" → "Image"). The
+* cases are literal `t('aria/…')` calls so `i18next-cli` extracts them. Unknown/custom types return
+* `undefined`, so the announcement falls back to a generic "Attachment".
+*/
+var getAttachmentTypeLabel = (type, t) => {
+	switch (type) {
+		case "audio": return t("aria/audio");
+		case "file": return t("aria/file");
+		case "giphy": return t("aria/GIF");
+		case "image": return t("aria/image");
+		case "video": return t("aria/video");
+		case "voiceRecording": return t("aria/voice message");
+		default: return;
 	}
-	if (previewTextToRender) return isMessageAIGenerated?.(latestMessage) ? previewTextToRender : renderPreviewText(previewTextToRender);
-	if (latestMessage.command) return `/${latestMessage.command}`;
-	if (latestMessage.attachments?.length) return t("🏙 Attachment...");
-	if (latestMessage.shared_location) return t("📍Shared location");
-	return t("Empty message...");
+};
+/**
+* The text announced for the channel's latest message (for an accessible name / live region).
+* Non-text content gets a concise, screen-reader-friendly phrasing that may differ from the visible
+* preview: a poll announces its question, an attachment its type, a shared location and a deleted
+* message a plain phrase. User-message text is stripped of markdown so the words are read, not the
+* syntax (AI-generated text is returned verbatim, matching the display path).
+*/
+var getLatestMessagePreviewText = (channel, t, userLanguage = "en", isMessageAIGenerated, latestMessage) => {
+	const { isUserMessageText, kind, latestMessage: resolvedLatestMessage, pollName, text } = getLatestMessagePreviewParts(channel, t, userLanguage, latestMessage);
+	switch (kind) {
+		case "poll": return t("aria/Poll: {{ pollName }}", { pollName: pollName ?? "" });
+		case "attachment": {
+			const realAttachments = resolvedLatestMessage?.attachments?.filter((attachment) => !attachment.og_scrape_url) ?? [];
+			if (realAttachments.length > 1) return t("aria/Message with attachments");
+			const typeLabel = getAttachmentTypeLabel(realAttachments[0]?.type, t);
+			return typeLabel ? t("aria/Attachment {{ attachmentType }}", { attachmentType: typeLabel }) : t("aria/Attachment");
+		}
+		case "location": return t("aria/Shared location");
+		case "empty": return t("aria/There are no messages in this chat.");
+		case "text": return isUserMessageText && resolvedLatestMessage && !isMessageAIGenerated?.(resolvedLatestMessage) ? stripMarkdownToText(text) : text;
+		default: return text;
+	}
+};
+var getLatestMessagePreview = (channel, t, userLanguage = "en", isMessageAIGenerated, latestMessage) => {
+	const { isUserMessageText, latestMessage: resolvedLatestMessage, text } = getLatestMessagePreviewParts(channel, t, userLanguage, latestMessage);
+	return isUserMessageText && resolvedLatestMessage && !isMessageAIGenerated?.(resolvedLatestMessage) ? renderPreviewText(text) : text;
 };
 /**
 * Channel display image: channel.data.image, or for DM (2 members) the other member's user.image.
@@ -3196,7 +3469,8 @@ var Notification = (0, react.forwardRef)(({ className, entryDirection, Icon = De
 	};
 	const isPersistent = !notification.duration;
 	const severity = notification.severity;
-	const livePriority = severity === "error" ? "assertive" : "polite";
+	const ariaLiveOverride = notification.metadata?.ariaLive;
+	const livePriority = ariaLiveOverride === "assertive" || ariaLiveOverride === "polite" ? ariaLiveOverride : severity === "error" ? "assertive" : "polite";
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		className: (0, clsx.default)("str-chat__notification", entryDirection && `str-chat__notification--enter-from-${entryDirection}`, transitionState === "enter" && "str-chat__notification--is-entering", transitionState === "exit" && "str-chat__notification--is-exiting", severity && `str-chat__notification--${severity}`, severity === "loading" && "str-chat__notification--loading", className),
 		"data-testid": "notification",
@@ -3621,6 +3895,18 @@ Object.defineProperty(exports, "Alert", {
 		return Alert;
 	}
 });
+Object.defineProperty(exports, "AriaLiveOutlet", {
+	enumerable: true,
+	get: function() {
+		return AriaLiveOutlet;
+	}
+});
+Object.defineProperty(exports, "AriaLiveOutletContext", {
+	enumerable: true,
+	get: function() {
+		return AriaLiveOutletContext;
+	}
+});
 Object.defineProperty(exports, "Avatar", {
 	enumerable: true,
 	get: function() {
@@ -3951,6 +4237,12 @@ Object.defineProperty(exports, "VideoThumbnail", {
 		return VideoThumbnail;
 	}
 });
+Object.defineProperty(exports, "VisuallyHidden", {
+	enumerable: true,
+	get: function() {
+		return VisuallyHidden;
+	}
+});
 Object.defineProperty(exports, "createDefaultPickNext", {
 	enumerable: true,
 	get: function() {
@@ -3987,6 +4279,18 @@ Object.defineProperty(exports, "getLatestMessagePreview", {
 		return getLatestMessagePreview;
 	}
 });
+Object.defineProperty(exports, "getLatestMessagePreviewText", {
+	enumerable: true,
+	get: function() {
+		return getLatestMessagePreviewText;
+	}
+});
+Object.defineProperty(exports, "getNextRovingFocusIndex", {
+	enumerable: true,
+	get: function() {
+		return getNextRovingFocusIndex;
+	}
+});
 Object.defineProperty(exports, "getTranslatedMessageText", {
 	enumerable: true,
 	get: function() {
@@ -4053,6 +4357,12 @@ Object.defineProperty(exports, "useAriaIdentifiers", {
 		return useAriaIdentifiers;
 	}
 });
+Object.defineProperty(exports, "useAriaLiveOutletContext", {
+	enumerable: true,
+	get: function() {
+		return useAriaLiveOutletContext;
+	}
+});
 Object.defineProperty(exports, "useChannelDisplayName", {
 	enumerable: true,
 	get: function() {
@@ -4156,4 +4466,4 @@ Object.defineProperty(exports, "useStableCallback", {
 	}
 });
 
-//# sourceMappingURL=useChannelHeaderOnlineStatus.d39ede24.js.map
+//# sourceMappingURL=useChannelHeaderOnlineStatus.72753090.js.map