Thông báo & live region

{/* Lỗi gắn với một ô */}
<Field label="Mã giảm giá" validationState="error" validationMessage="Mã đã hết hạn ngày 30/9.">
  <Input defaultValue="SAKURA30" />
</Field>

{/* Trạng thái của cả trang / vùng, tồn tại tới khi được xử lý */}
<MessageBar
  intent="warning"
  title="Bộ nhớ sắp đầy."
  actions={<Button size="small">Nâng cấp</Button>}
>
  Bạn đã dùng 92% dung lượng.
</MessageBar>

{/* Phản hồi ngắn cho hành động vừa làm */}
toast({ intent: "success", title: "Đã lưu thay đổi" });

{/* Cần quyết định ngay, chặn mọi thao tác khác */}
<DialogSurface modalType="alert">
  <DialogTitle action={null}>Xoá dự án “Sakura”?</DialogTitle>
  …
</DialogSurface>

{/* Polite: đọc khi trình đọc màn hình rảnh — kết quả, trạng thái, xác nhận */}
<div role="status">Đã lưu bản nháp lúc 14:05</div>

{/* Assertive: ngắt lời ngay — chỉ cho lỗi và cảnh báo cần xử lý */}
<div role="alert">Mất kết nối. Thay đổi chưa được lưu.</div>

{/* Vùng live phải có sẵn trong DOM TRƯỚC khi đổi nội dung */}
<p role="status" className="sr-only">{message}</p>

import { toast } from "@/components/ui";

// Thành công, không có hành động: tự đóng sau 3 giây là hợp lý.
toast({ intent: "success", title: "Đã sao chép liên kết" });

// Lỗi hoặc có hành động: giữ lại tới khi người dùng đóng.
toast({
  intent: "error",
  title: "Không thể đồng bộ",
  body: "Kiểm tra kết nối mạng rồi thử lại.",
  timeout: -1,
  action: {
    label: "Thử lại",
    // Người dùng trình đọc màn hình có thể không kịp tới toast — chỉ cách làm khác.
    altText: "Thử đồng bộ lại bằng nút Đồng bộ trên thanh công cụ",
    onClick: retrySync,
  },
});

import { AriaLiveAnnouncer, useAnnounce, YugenProvider } from "@/components/ui";

// 1. Gắn một lần ở gốc: render hai vùng live ẩn (polite / assertive)
<YugenProvider applyToDocument>
  <Toaster />
  <AriaLiveAnnouncer>
    <App />
  </AriaLiveAnnouncer>
</YugenProvider>

// 2. Gọi ở bất kỳ đâu
function UploadButton({ files }: { files: File[] }) {
  const { announce } = useAnnounce();

  async function upload() {
    announce("Đang tải lên…");
    try {
      await uploadFiles(files);
      announce(`Đã tải lên ${files.length} tệp`, { batchId: "upload" });
    } catch {
      announce("Tải lên thất bại. Thử lại sau.", { politeness: "assertive", batchId: "upload" });
    }
  }

  return <Button onClick={upload}>Tải lên</Button>;
}