Function useAriaLive

web/hooks/useAriaLive.ts:38–65

({
  politeness = "polite",
  delay = 50,
}: UseAriaLiveOptions = {})

 * <div {...liveRegionProps} className="sr-only">{announcement}</div>
 */
export function useAriaLive({
  politeness = "polite",
  delay = 50,
}: UseAriaLiveOptions = {}): UseAriaLiveReturn {
  const [announcement, setAnnouncement] = useState("");
  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);

  const announce = useCallback(
    (message: string) => {
      setAnnouncement("");
      if (timerRef.current) clearTimeout(timerRef.current);
      timerRef.current = setTimeout(() => setAnnouncement(message), delay);
    },
    [delay]
  );

  useEffect(() => () => { if (timerRef.current) clearTimeout(timerRef.current); }, []);

  return {
    announcement,
    announce,
    liveRegionProps: {
      role: "status",
      "aria-live": politeness,
      "aria-atomic": true,
    },
  };
}