stream-chat-react 14.7.0 → 14.9.0

package/dist/es/{useChannelHeaderOnlineStatus.b3a51ca7.mjs → useChannelHeaderOnlineStatus.c86db868.mjs}

@@ -1,5 +1,5 @@
-import { Ar as useDialogIsOpen, Er as DialogPortalEntry, Fr as useModalDialogIsTopmost, Ft as IconChevronLeft, It as IconChevronRight, Jn as IconXmark, Jt as IconExclamationTriangleFill, Kt as IconExclamationMark, Lr as useStateStore, Mr as useDialogOnNearestManager, Nr as useModalDialog, Pr as useModalDialogIsOpen, Qn as useStableId, R as usePopoverPosition, Tn as IconRefresh, Vr as useComponentContext, Vt as IconDownload, Wr as useChatContext, Z as isMessageDeleted, Zn as Button, bn as IconPlayFill, bt as IconArrowLeft, en as IconImage, in as IconLoading, jt as IconCheckmark, kr as useDialog, mr as isDate, n as hasSystemNotificationTag, pr as getDateString, qr as useChannelStateContext, qt as IconExclamationMarkFill, r as useNotificationApi, rr as isNotificationForPanel, ur as useTranslationContext, xr as modalDialogManagerId, yr as DialogManagerProvider, yt as IconArrowDownCircle, zn as IconUser } from "./useNotificationApi.eff88f29.mjs";
-import React, { createContext, createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { $n as useStableId, Ar as DialogPortalEntry, Bn as IconUser, Cr as DialogManagerProvider, En as IconRefresh, Gr as useComponentContext, Ht as IconDownload, Ir as useDialogOnNearestManager, It as IconChevronLeft, Jr as useChatContext, Jt as IconExclamationMarkFill, Lr as useModalDialog, Lt as IconChevronRight, Mt as IconCheckmark, Nr as useDialog, Pr as useDialogIsOpen, Q as isMessageDeleted, Qn as Button, Rr as useModalDialogIsOpen, Tr as modalDialogManagerId, Vr as useStateStore, Yn as IconXmark, Yt as IconExclamationTriangleFill, Zr as useChannelStateContext, _r as getDateString, an as IconLoading, bt as IconArrowDownCircle, ir as isNotificationForPanel, jr as Portal, mr as useTranslationContext, n as hasSystemNotificationTag, qt as IconExclamationMark, r as useNotificationApi, sr as AriaLiveAnnouncerContext, tn as IconImage, vr as isDate, xn as IconPlayFill, xt as IconArrowLeft, z as usePopoverPosition, zr as useModalDialogIsTopmost } from "./useNotificationApi.ed6bff88.mjs";
+import React, { createContext, createElement, forwardRef, isValidElement, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { isGiphyAttachment, isImageAttachment, isLocalImageAttachment, isLocalVideoAttachment, isScrapedContent, isVideoAttachment } from "stream-chat";
 import clsx from "clsx";
@@ -9,6 +9,9 @@ import { SKIP, visit } from "unist-util-visit";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { sanitizeUrl } from "@braintree/sanitize-url";
+import { toString } from "mdast-util-to-string";
+import remarkParse from "remark-parse";
+import { unified } from "unified";
 //#region src/context/MessageContext.tsx
 var MessageContext = React.createContext(void 0);
 var MessageProvider = ({ children, value }) => /* @__PURE__ */ jsx(MessageContext.Provider, {
@@ -107,6 +110,84 @@ var useModalContext = () => {
 	return contextValue;
 };
 //#endregion
+//#region src/components/Accessibility/AriaLiveOutletContext.ts
+var AriaLiveOutletContext = createContext(void 0);
+var useAriaLiveOutletContext = () => 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__ */ 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 = useRef(null);
+	if (idRef.current === null) idRef.current = Symbol("aria-live-outlet");
+	const registerOutlet = context?.registerOutlet;
+	const unregisterOutlet = context?.unregisterOutlet;
+	useEffect(() => {
+		const id = idRef.current;
+		if (!id || !registerOutlet || !unregisterOutlet) return;
+		registerOutlet(id, layer);
+		return () => unregisterOutlet(id);
+	}, [
+		layer,
+		registerOutlet,
+		unregisterOutlet
+	]);
+	const getPortalDestination = useCallback(() => document.body, []);
+	if (!context || context.activeOutletId !== idRef.current) return null;
+	const { announcementsByPriority } = context;
+	const liveRegions = /* @__PURE__ */ jsxs(VisuallyHidden, { children: [/* @__PURE__ */ 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__ */ jsx("div", { children: announcement.message }, announcement.id))
+	}), /* @__PURE__ */ 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__ */ jsx("div", { children: announcement.message }, announcement.id))
+	})] });
+	if (!portal) return liveRegions;
+	return /* @__PURE__ */ jsx(Portal, {
+		getPortalDestination,
+		isOpen: true,
+		children: liveRegions
+	});
+};
+//#endregion
 //#region src/components/Notifications/NotificationConfigurationContext.tsx
 var defaultNotificationDisplayFilter = () => true;
 var defaultNotificationConfigurationContextValue = { displayFilter: defaultNotificationDisplayFilter };
@@ -418,7 +499,7 @@ var DialogAnchor = ({ allowFlip = true, children, className, closeOnClickOutside
 			autoFocus: focus,
 			contain: trapFocus,
 			restoreFocus: true,
-			children: /* @__PURE__ */ jsx("div", {
+			children: /* @__PURE__ */ jsxs("div", {
 				...anchorDivProps,
 				"aria-describedby": ariaDescribedBy,
 				"aria-label": resolvedAriaLabel,
@@ -432,7 +513,7 @@ var DialogAnchor = ({ allowFlip = true, children, className, closeOnClickOutside
 				role: resolvedRole,
 				style: styles,
 				tabIndex: typeof tabIndex !== "undefined" ? tabIndex : 0,
-				children
+				children: [children, resolvedAriaModal && /* @__PURE__ */ jsx(AriaLiveOutlet, { layer: 1 })]
 			})
 		})
 	});
@@ -639,6 +720,7 @@ var UserContextMenuButton = ({ children, className, imageUrl, role = "menuitem",
 	role,
 	type: "button",
 	children: [/* @__PURE__ */ jsx(Avatar, {
+		"aria-hidden": true,
 		imageUrl,
 		size: "sm",
 		userName
@@ -783,13 +865,28 @@ var ContextMenuButton = (props) => {
 	});
 	return /* @__PURE__ */ jsx(BaseContextMenuButton, { ...buttonProps });
 };
-var ContextMenuBackButton = ({ children, className, role = "menuitem", ...props }) => /* @__PURE__ */ jsx("button", {
-	...props,
-	className: clsx("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 } = useTranslationContext();
+	const generatedBackNavigationLabelId = useStableId();
+	const generatedVisibleLabelId = useStableId();
+	const resolvedAriaLabel = ariaLabel ?? t("aria/Back to parent menu button");
+	const resolvedAriaLabelledBy = ariaLabelledBy ?? `${generatedVisibleLabelId} ${generatedBackNavigationLabelId}`;
+	return /* @__PURE__ */ jsxs("button", {
+		...props,
+		"aria-labelledby": resolvedAriaLabelledBy,
+		className: clsx("str-chat__context-menu__back-button", className),
+		role,
+		type: "button",
+		children: [!ariaLabelledBy && /* @__PURE__ */ jsx(VisuallyHidden, {
+			id: generatedBackNavigationLabelId,
+			children: resolvedAriaLabel
+		}), /* @__PURE__ */ jsx("span", {
+			className: "str-chat__context-menu__back-button__content",
+			id: generatedVisibleLabelId,
+			children
+		})]
+	});
+};
 var ContextMenuHeader = ({ children, className, ...props }) => /* @__PURE__ */ jsx("div", {
 	...props,
 	className: clsx("str-chat__context-menu__header", className),
@@ -837,6 +934,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.createContext(void 0);
 var useContextMenuContext = () => useContext(ContextMenuContext);
 /**
@@ -846,7 +950,10 @@ var useContextMenuContext = () => 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 } = useTranslationContext();
+	const resolvedBackLabel = backLabel ?? t("Back");
+	const { ["aria-describedby"]: rootAriaDescribedBy, ["aria-label"]: rootAriaLabel, ["aria-labelledby"]: rootAriaLabelledBy, ...contextMenuRootProps } = props;
 	const rootLevel = useMemo(() => ({
 		Header,
 		items,
@@ -862,18 +969,23 @@ function ContextMenuContent({ anchorReferenceElement, backLabel = "Back", childr
 	const [menuBodyAnimationKey, setMenuBodyAnimationKey] = useState(0);
 	const contextMenuRootRef = useRef(null);
 	const focusRestoreRequestRef = useRef(null);
+	const pendingForwardFocusRef = useRef(null);
 	const activeMenu = menuStack[menuStack.length - 1];
+	const keyboardNavigationItemSelector = keyboardNavigation?.itemSelector ?? DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR;
 	const ActiveMenuItemsWrapper = activeMenu.ItemsWrapper ?? React.Fragment;
 	const closeMenu = useCallback(() => {
 		onClose?.();
 	}, [onClose]);
-	const openSubmenu = useCallback(({ focusReturnTarget, Header, ItemsWrapper: SubmenuItemsWrapper, menuClassName, Submenu }) => {
+	const openSubmenu = 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
@@ -884,6 +996,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);
 		});
 	}, []);
@@ -896,17 +1009,24 @@ function ContextMenuContent({ anchorReferenceElement, backLabel = "Back", childr
 	useEffect(() => {
 		onMenuLevelChange?.(menuStack.length);
 	}, [menuStack.length, onMenuLevelChange]);
-	useEffect(() => {
+	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
+	]);
 	useEffect(() => {
 		if (!transitionDirection) return;
 		setMenuBodyAnimationKey((value) => value + 1);
@@ -918,10 +1038,7 @@ function ContextMenuContent({ anchorReferenceElement, backLabel = "Back", childr
 	const unregisterDialogSubmenu = useCallback(() => {
 		dialogSubmenuOpenCountRef.current = Math.max(0, dialogSubmenuOpenCountRef.current - 1);
 	}, []);
-	const rovingFocusKeyDownHandler = useMemo(() => {
-		const itemSelector = keyboardNavigation?.itemSelector ?? DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR;
-		return createRovingFocusKeyDownHandler({ getItems: (event) => getVisibleContextMenuKeyboardNavigationItems(event.currentTarget, itemSelector) });
-	}, [keyboardNavigation]);
+	const rovingFocusKeyDownHandler = useMemo(() => createRovingFocusKeyDownHandler({ getItems: (event) => getVisibleContextMenuKeyboardNavigationItems(event.currentTarget, keyboardNavigationItemSelector) }), [keyboardNavigationItemSelector]);
 	const escapeConsumedRef = useRef(false);
 	const keyboardNavigationHandler = useCallback((event) => {
 		if (event.key === "Escape") {
@@ -947,6 +1064,7 @@ function ContextMenuContent({ anchorReferenceElement, backLabel = "Back", childr
 			event.stopPropagation();
 		}
 	}, []);
+	const isSubmenuLevel = menuStack.length > 1;
 	return /* @__PURE__ */ jsx(ContextMenuContext.Provider, {
 		value: {
 			anchorReferenceElement,
@@ -957,15 +1075,19 @@ function ContextMenuContent({ anchorReferenceElement, backLabel = "Back", childr
 			unregisterDialogSubmenu
 		},
 		children: /* @__PURE__ */ jsxs(ContextMenuRoot, {
+			"aria-describedby": isSubmenuLevel ? void 0 : rootAriaDescribedBy,
+			"aria-label": isSubmenuLevel ? t("aria/Submenu") : rootAriaLabel,
+			"aria-labelledby": isSubmenuLevel ? void 0 : rootAriaLabelledBy,
 			className: clsx(className, activeMenu.menuClassName),
 			"data-str-chat-enable-animations": enableAnimations,
 			onKeyDownCapture: keyboardNavigationHandler,
 			onKeyUpCapture: suppressEscapeKeyUp,
 			ref: contextMenuRootRef,
-			...props,
+			...contextMenuRootProps,
 			children: [activeMenu.Header ? /* @__PURE__ */ jsx(activeMenu.Header, {}) : menuStack.length > 1 ? /* @__PURE__ */ jsx(ContextMenuHeader, { children: /* @__PURE__ */ jsxs(ContextMenuBackButton, {
+				"aria-label": backButtonAriaLabel,
 				onClick: returnToParentMenu,
-				children: [/* @__PURE__ */ jsx(IconChevronLeft, {}), /* @__PURE__ */ jsx("span", { children: backLabel })]
+				children: [/* @__PURE__ */ jsx(IconChevronLeft, {}), /* @__PURE__ */ jsx("span", { children: resolvedBackLabel })]
 			}) }) : null, /* @__PURE__ */ jsx(ContextMenuBody, {
 				className: clsx({
 					"str-chat__context-menu__body--submenu-backward": transitionDirection === "backward",
@@ -1070,9 +1192,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__ */ jsx(DialogAnchor, {
 			allowFlip,
+			"aria-describedby": isSubmenuLevel ? void 0 : ariaDescribedBy,
+			"aria-label": isSubmenuLevel ? void 0 : ariaLabel,
+			"aria-labelledby": isSubmenuLevel ? void 0 : ariaLabelledBy,
 			closeOnClickOutside,
 			closeTransitionMs,
 			dialogManagerId,
@@ -1143,8 +1269,7 @@ var PromptHeader = ({ className, close, description, descriptionId, goBack, Lead
 				className: "str-chat__prompt__header__trailing-content",
 				children: [TrailingContent && /* @__PURE__ */ jsx(TrailingContent, {}), close && /* @__PURE__ */ jsx(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,
@@ -1220,19 +1345,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 = useStableId();
 	const resolvedDialogId = dialogId ?? `modal-dialog-${generatedDialogId}`;
 	const dialog = useModalDialog(resolvedDialogId);
 	const isOpen = useModalDialogIsOpen(resolvedDialogId);
 	const isTopmost = useModalDialogIsTopmost(resolvedDialogId);
 	const overlayRef = useRef(null);
+	const dialogRef = useRef(null);
 	const closeButtonRef = useRef(null);
 	const closingRef = useRef(false);
 	const { theme } = useChatContext();
 	const { NotificationList: NotificationList$1 = NotificationList } = useComponentContext();
 	const { className: dialogRootClassName, onKeyDown: dialogRootOnKeyDown, ...dialogRootPropsRest } = dialogRootProps ?? {};
-	const dialogLabelingBaseId = dialog.id;
+	const dialogLabelingBaseId = resolvedDialogId;
+	const resolvedInitialFocusStrategy = initialFocusStrategy ?? "firstElement";
 	const resolvedModalAriaProps = useResolvedModalAriaProps({
 		ariaDescribedby,
 		ariaLabel,
@@ -1265,8 +1392,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();
+			}
+		}
 	};
 	useEffect(() => {
 		if (!open) {
@@ -1280,6 +1417,21 @@ var GlobalModal = ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabe
 		isOpen,
 		open
 	]);
+	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__ */ jsx(DialogPortalEntry, {
 		dialogId: resolvedDialogId,
@@ -1292,7 +1444,7 @@ var GlobalModal = ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabe
 				ref: overlayRef,
 				children: [
 					/* @__PURE__ */ jsx(FocusScope, {
-						autoFocus: isTopmost,
+						autoFocus: isTopmost && !getInitialFocusElement && resolvedInitialFocusStrategy === "firstElement",
 						contain: isTopmost,
 						restoreFocus: true,
 						children: /* @__PURE__ */ jsx("div", {
@@ -1304,15 +1456,16 @@ var GlobalModal = ({ "aria-describedby": ariaDescribedby, "aria-label": ariaLabe
 							className: clsx("str-chat__modal__dialog", dialogRootClassName),
 							inert: isTopmost ? void 0 : true,
 							onKeyDown: handleDialogKeyDown,
+							ref: dialogRef,
 							role,
 							tabIndex: isTopmost ? 0 : -1,
-							children: /* @__PURE__ */ jsx(DialogManagerProvider, {
+							children: /* @__PURE__ */ jsxs(DialogManagerProvider, {
 								id: `${resolvedDialogId}-floating-dialog-manager`,
 								portalDestinationProps: {
 									captureOutsideClicks: true,
 									className: "str-chat__modal__floating-dialog-overlay"
 								},
-								children
+								children: [children, isTopmost && /* @__PURE__ */ jsx(AriaLiveOutlet, { layer: 1 })]
 							})
 						})
 					}),
@@ -2676,13 +2829,28 @@ var SwitchField = ({ children, description, fieldClassName, title, ...props }) =
 	const switchId = id ?? `str-chat__switch-field-${generatedSwitchId}`;
 	const switchLabelId = `${switchId}-label`;
 	const inputRef = useRef(null);
+	const announce = useContext(AriaLiveAnnouncerContext)?.announce;
+	const { t } = useTranslationContext("SwitchField");
 	const [uncontrolledChecked, setUncontrolledChecked] = useState(Boolean(defaultChecked));
 	const isControlled = checked !== void 0;
 	const isOn = isControlled ? checked : uncontrolledChecked;
 	const isReadOnly = isControlled && onChange === void 0;
+	const childLabelId = (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);
@@ -2694,8 +2862,6 @@ var SwitchField = ({ children, description, fieldClassName, title, ...props }) =
 		if (disabled || event.target === inputRef.current) return;
 		inputRef.current?.click();
 	};
-	const childLabelId = (isValidElement(children) ? children : void 0)?.props.id;
-	const resolvedAriaLabelledBy = ariaLabelledBy ?? (!ariaLabel ? title ? switchLabelId : childLabelId : void 0);
 	return /* @__PURE__ */ jsxs("div", {
 		className: clsx("str-chat__form__switch-field", fieldClassName, disabled && "str-chat__form__switch-field--disabled"),
 		children: [title ? /* @__PURE__ */ jsx(SwitchFieldLabel, {
@@ -2835,7 +3001,6 @@ var TextInput = forwardRef(function TextInput({ className, disabled, error = fal
 					className: "str-chat__form-text-input__control-row",
 					children: [
 						leading ? /* @__PURE__ */ jsx("span", {
-							"aria-hidden": true,
 							className: "str-chat__form-text-input__leading",
 							children: leading
 						}) : null,
@@ -2854,7 +3019,6 @@ var TextInput = forwardRef(function TextInput({ className, disabled, error = fal
 							children: trailingText
 						}) : null,
 						trailing ? /* @__PURE__ */ jsx("span", {
-							"aria-hidden": true,
 							className: "str-chat__form-text-input__trailing",
 							children: trailing
 						}) : null
@@ -2934,6 +3098,16 @@ var renderPreviewText = (text) => /* @__PURE__ */ jsx(ReactMarkdown, {
 	skipHtml: true,
 	children: text
 });
+var createPlainTextProcessor = () => unified().use(remarkParse).use(remarkPlugins);
+var plainTextProcessor;
+var stripMarkdownToText = (text) => {
+	try {
+		const processor = plainTextProcessor ?? (plainTextProcessor = createPlainTextProcessor());
+		return 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) => {
@@ -2942,32 +3116,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 (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 (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.
@@ -3192,7 +3464,8 @@ var Notification = forwardRef(({ className, entryDirection, Icon = DefaultNotifi
 	};
 	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__ */ jsxs("div", {
 		className: clsx("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",
@@ -3611,6 +3884,6 @@ function useChannelHeaderOnlineStatus({ channel: channelOverride, watcherCount:
 	return `${t("{{ memberCount }} members", { memberCount })} · ${t("{{ watcherCount }} online", { watcherCount })}`;
 }
 //#endregion
-export { ContextMenuBackButton as $, GalleryUI as A, MessageTranslationViewContext as At, FileIcon as B, Checkmark as C, LoadingIndicator as Ct, SwitchFieldLabel as D, ModalContext as Dt, SwitchFieldDescription as E, useNotificationConfigurationContext as Et, useGalleryContext as F, MessageProvider as Ft, Timestamp as G, FILE_ICON_NO_LABEL_CLASSNAME as H, toBaseImageDescriptors as I, useMessageContext as It, htmlToTextPlugin as J, plusPlusToEmphasis as K, BaseImage as L, VideoPlayer as M, getTranslatedMessageText as Mt, GalleryContext as N, useMessageTranslationViewContext as Nt, SwitchFieldTitle as O, ModalContextProvider as Ot, toGalleryItemDescriptors as P, MessageContext as Pt, ContextMenu as Q, ImagePlaceholder as R, Checkbox as S, FileSizeIndicator as St, SwitchField as T, NotificationConfigurationProvider as Tt, DownloadButton as U, FILE_ICON_GRAPHIC_CLASSNAME as V, MessageTimestamp as W, Prompt as X, GlobalModal as Y, BaseContextMenuButton as Z, getLatestMessagePreview as _, Alert as _t, pickNewest as a, DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR as at, ListItemLayoutContent as b, useAriaIdentifiers as bt, useIsUserMuted as c, useContextMenuContext as ct, useSelectedChannelState as d, ChannelAvatar as dt, ContextMenuBody as et, isDmChannel as f, Badge as ft, getGroupChannelDisplayInfo as g, useDialogAnchor as gt, getChannelDisplayImage as h, DialogAnchor as ht, createDefaultPickNext as i, ContextMenuRoot as it, VideoThumbnail as j, MessageTranslationViewProvider as jt, Gallery as k, useModalContext as kt, useIsChannelMuted as l, createRovingFocusKeyDownHandler as lt, useChannelDisplayName as m, Avatar as mt, useChannelHasMembersOnline as n, ContextMenuContent as nt, pickOldest as o, EmojiContextMenuButton as ot, useChannelPreviewInfo as p, ErrorBadge as pt, imageToLink as q, NotificationList as r, ContextMenuHeader as rt, Notification as s, UserContextMenuButton as st, useChannelHeaderOnlineStatus as t, ContextMenuButton as tt, useChannelMembershipState as u, GroupAvatar as ut, renderPreviewText as v, Header as vt, Switch as w, useNotifications as wt, TextInput as x, useStableCallback as xt, ListItemLayout as y, Root as yt, formatTime as z };
+export { ContextMenu as $, Gallery as A, VisuallyHidden as At, formatTime as B, MessageContext as Bt, Checkbox as C, useStableCallback as Ct, SwitchFieldDescription as D, NotificationConfigurationProvider as Dt, SwitchField as E, useNotifications as Et, toGalleryItemDescriptors as F, useModalContext as Ft, MessageTimestamp as G, FILE_ICON_GRAPHIC_CLASSNAME as H, useMessageContext as Ht, useGalleryContext as I, MessageTranslationViewContext as It, imageToLink as J, Timestamp as K, toBaseImageDescriptors as L, MessageTranslationViewProvider as Lt, VideoThumbnail as M, useAriaLiveOutletContext as Mt, VideoPlayer as N, ModalContext as Nt, SwitchFieldLabel as O, useNotificationConfigurationContext as Ot, GalleryContext as P, ModalContextProvider as Pt, BaseContextMenuButton as Q, BaseImage as R, getTranslatedMessageText as Rt, TextInput as S, useAriaIdentifiers as St, Switch as T, LoadingIndicator as Tt, FILE_ICON_NO_LABEL_CLASSNAME as U, FileIcon as V, MessageProvider as Vt, DownloadButton as W, GlobalModal as X, htmlToTextPlugin as Y, Prompt as Z, getLatestMessagePreview as _, DialogAnchor as _t, pickNewest as a, ContextMenuRoot as at, ListItemLayout as b, Header as bt, useIsUserMuted as c, UserContextMenuButton as ct, useSelectedChannelState as d, getNextRovingFocusIndex as dt, ContextMenuBackButton as et, isDmChannel as f, GroupAvatar as ft, getGroupChannelDisplayInfo as g, Avatar as gt, getChannelDisplayImage as h, ErrorBadge as ht, createDefaultPickNext as i, ContextMenuHeader as it, GalleryUI as j, AriaLiveOutletContext as jt, SwitchFieldTitle as k, AriaLiveOutlet as kt, useIsChannelMuted as l, useContextMenuContext as lt, useChannelDisplayName as m, Badge as mt, useChannelHasMembersOnline as n, ContextMenuButton as nt, pickOldest as o, DEFAULT_CONTEXT_MENU_KEYBOARD_NAVIGATION_ITEM_SELECTOR as ot, useChannelPreviewInfo as p, ChannelAvatar as pt, plusPlusToEmphasis as q, NotificationList as r, ContextMenuContent as rt, Notification as s, EmojiContextMenuButton as st, useChannelHeaderOnlineStatus as t, ContextMenuBody as tt, useChannelMembershipState as u, createRovingFocusKeyDownHandler as ut, getLatestMessagePreviewText as v, useDialogAnchor as vt, Checkmark as w, FileSizeIndicator as wt, ListItemLayoutContent as x, Root as xt, renderPreviewText as y, Alert as yt, ImagePlaceholder as z, useMessageTranslationViewContext as zt };
 
-//# sourceMappingURL=useChannelHeaderOnlineStatus.b3a51ca7.mjs.map
+//# sourceMappingURL=useChannelHeaderOnlineStatus.c86db868.mjs.map