@wistia/ui 2.11.0-beta.f716262f.bd7b993 → 2.11.0-beta.fee00fd8.a58d2f5

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v2.11.0-beta.f716262f.bd7b993
+ * @license @wistia/ui v2.11.0-beta.fee00fd8.a58d2f5
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -240,6 +240,7 @@ const visuallyHiddenStyle = {
 const AriaLiveContext = createContext(void 0);
 //#endregion
 //#region src/providers/AriaLiveProvider/AriaLiveProvider.tsx
+const ANNOUNCEMENT_CLEAR_DELAY_MS = 5e3;
 const debugStyle = {
 	position: "absolute",
 	border: "3px dashed red",
@@ -249,35 +250,58 @@ const debugStyle = {
 	minHeight: "50px",
 	width: "calc(100% - 10px)"
 };
+const LiveRegions = styled.div(({ $debug }) => $debug ? debugStyle : visuallyHiddenStyle);
+const LiveRegion = ({ announcements, politeness }) => /* @__PURE__ */ jsx("div", {
+	"aria-live": politeness,
+	role: "log",
+	children: announcements.filter((announcement) => announcement.politeness === politeness).map((announcement) => /* @__PURE__ */ jsx("div", { children: announcement.message }, announcement.id))
+});
 const AriaLiveProvider = ({ children, debug = false }) => {
-	const [message, setMessage] = useState(null);
-	const liveRegionRef = useRef(null);
+	const [announcements, setAnnouncements] = useState([]);
+	const nextId = useRef(0);
+	const pendingKeys = useRef(/* @__PURE__ */ new Set());
 	useEffect(() => {
-		const liveRegion = document.createElement("div");
-		liveRegion.setAttribute("role", "alert");
-		liveRegion.setAttribute("aria-live", "polite");
-		liveRegion.setAttribute("aria-atomic", "true");
-		Object.assign(liveRegion.style, debug ? debugStyle : visuallyHiddenStyle);
-		document.body.append(liveRegion);
-		liveRegionRef.current = liveRegion;
+		if (announcements.length === 0) return;
+		const soonest = Math.min(...announcements.map((announcement) => announcement.expiresAt));
+		const timer = setTimeout(() => {
+			const now = Date.now();
+			setAnnouncements((current) => current.filter((announcement) => announcement.expiresAt > now));
+		}, Math.max(soonest - Date.now(), 0));
 		return () => {
-			if (liveRegionRef.current) liveRegionRef.current.remove();
+			clearTimeout(timer);
 		};
-	}, [debug]);
-	useEffect(() => {
-		if (liveRegionRef.current && isNonEmptyString(message)) liveRegionRef.current.textContent = message;
-	}, [message]);
-	const announce = useCallback((announcement, politeness = "polite") => {
-		if (liveRegionRef.current) {
-			liveRegionRef.current.setAttribute("aria-live", politeness);
-			setMessage(announcement);
-			setTimeout(() => setMessage(null), 1e3);
-		}
+	}, [announcements]);
+	const announce = useCallback((message, politeness = "polite") => {
+		if (!isNonEmptyString(message)) return;
+		const key = `${politeness}:${message}`;
+		if (pendingKeys.current.has(key)) return;
+		if (pendingKeys.current.size === 0) queueMicrotask(() => {
+			pendingKeys.current.clear();
+		});
+		pendingKeys.current.add(key);
+		const id = nextId.current;
+		nextId.current += 1;
+		const expiresAt = Date.now() + ANNOUNCEMENT_CLEAR_DELAY_MS;
+		setAnnouncements((current) => [...current, {
+			expiresAt,
+			id,
+			message,
+			politeness
+		}]);
 	}, []);
 	const value = useMemo(() => ({ announce }), [announce]);
-	return /* @__PURE__ */ jsx(AriaLiveContext, {
+	return /* @__PURE__ */ jsxs(AriaLiveContext, {
 		value,
-		children
+		children: [children, /* @__PURE__ */ jsxs(LiveRegions, {
+			$debug: debug,
+			children: [/* @__PURE__ */ jsx(LiveRegion, {
+				announcements,
+				politeness: "assertive"
+			}), /* @__PURE__ */ jsx(LiveRegion, {
+				announcements,
+				politeness: "polite"
+			})]
+		})]
 	});
 };
 //#endregion