Yugen UI

AriaLiveAnnouncer

AriaLiveAnnouncer và useAnnounce đọc thông báo động cho người dùng trình đọc màn hình.

AriaLiveAnnouncer render hai vùng live ẩn (polite và assertive) — gắn một lần ở gốc ứng dụng. useAnnounce() trả về { announce } với announce(message, { politeness, batchId }); thông báo xếp hàng, batchId gộp các thông báo liên tục thành thông báo mới nhất. Không có provider, useAnnounce tự tạo vùng live ở <body>.
Bật trình đọc màn hình (Narrator: Ctrl + Win + Enter) để nghe.

Import

Cài từ npm, chép mã nguồn vào dự án bằng @yugen-ui/cli hoặc shadcn CLI, hoặc import thẳng khi làm việc trong repo này.

TSX
// npm install yugen-uiimport { AriaLiveAnnouncer, useAnnounce } from "yugen-ui";

Biến thể

Mỗi ô là một mẫu độc lập: hover để Copy, hoặc bấm Code để xem mã nguồn.

Gắn provider ở gốc

Bọc ứng dụng trong AriaLiveAnnouncer; mọi component con dùng useAnnounce.

10 kết quả: Táo, Chuối, Cam, Xoài, Dứa, Nho, Ổi, Mận, Mít, Lê

batchId — gộp thông báo liên tục

Gõ nhanh vào ô tìm kiếm: chỉ số kết quả mới nhất được đọc.

Cách dùng

Nên
  • Dùng polite cho phản hồi thường (đã lưu, số kết quả); assertive chỉ cho lỗi khẩn.
  • Thông báo ngắn, đủ nghĩa khi nghe riêng.
  • Dùng batchId cho sự kiện lặp nhanh (gõ phím, kéo slider).
Không nên
  • Không announce mọi thay đổi nhỏ trên giao diện.
  • Không dùng thay cho nội dung hiển thị — người nhìn cũng cần thấy phản hồi.

Props

Prop · KiểuMặc địnhMô tả
AriaLiveAnnouncer.childrenReactNodeMặc định: —Cây ứng dụng; render kèm hai vùng live ẩn.
useAnnounce()() => { announce }Mặc định: —Lấy hàm announce (fallback vùng live ở <body> nếu không có provider).
announce(message, options?)(string, AnnounceOptions) => voidMặc định: —Đưa thông báo vào hàng đợi.
options.politeness"polite" | "assertive"Mặc định: "polite"Mức ưu tiên đọc.
options.batchIdstringMặc định: —Thông báo cùng batchId đang chờ bị thay bằng thông báo mới.