Notifications & live regions

{/* An error tied to one field */}
<Field label="Discount code" validationState="error" validationMessage="The code expired on September 30.">
  <Input defaultValue="SAKURA30" />
</Field>

{/* State of the whole page / region that stays until it is resolved */}
<MessageBar
  intent="warning"
  title="Storage is almost full."
  actions={<Button size="small">Upgrade</Button>}
>
  You have used 92% of your storage.
</MessageBar>

{/* Short feedback for the action just taken */}
toast({ intent: "success", title: "Changes saved" });

{/* A decision is needed now; every other action is blocked */}
<DialogSurface modalType="alert">
  <DialogTitle action={null}>Delete project “Sakura”?</DialogTitle>
  …
</DialogSurface>

{/* Polite: read when the screen reader is idle; results, status, confirmations */}
<div role="status">Draft saved at 2:05 PM</div>

{/* Assertive: interrupts right away; only for errors and warnings that need action */}
<div role="alert">Connection lost. Changes are not saved.</div>

{/* The live region must be in the DOM BEFORE its content changes */}
<p role="status" className="sr-only">{message}</p>

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

// Success with no action: closing after 3 seconds is fine.
toast({ intent: "success", title: "Link copied" });

// Error or an action: keep it until the user closes it.
toast({
  intent: "error",
  title: "Couldn't sync",
  body: "Check your network connection and try again.",
  timeout: -1,
  action: {
    label: "Retry",
    // Screen reader users may not reach the toast in time; describe another way to do it.
    altText: "Sync again with the Sync button in the toolbar",
    onClick: retrySync,
  },
});

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

// 1. Add once at the root: renders two hidden live regions (polite / assertive)
<YugenProvider applyToDocument>
  <Toaster />
  <AriaLiveAnnouncer>
    <App />
  </AriaLiveAnnouncer>
</YugenProvider>

// 2. Call it anywhere
function UploadButton({ files }: { files: File[] }) {
  const { announce } = useAnnounce();

  async function upload() {
    announce("Uploading…");
    try {
      await uploadFiles(files);
      announce(`Uploaded ${files.length} files`, { batchId: "upload" });
    } catch {
      announce("Upload failed. Try again later.", { politeness: "assertive", batchId: "upload" });
    }
  }

  return <Button onClick={upload}>Upload</Button>;
}