LiveRegion

LiveRegion and Announcer cover the non-visual status layer for product interfaces: saved states, table refreshes, validation updates, and background work.

#Default usage

<LiveRegion message="Table updated with 24 matching invoices." politeness="polite" visuallyHidden={false} />

#Import

import {
  AnnouncerProvider,
  LiveRegion,
  useAnnouncer,
} from "@froggdesign/enter-ui-react";

#Patterns

Mount AnnouncerProvider once near the root when multiple descendants need to announce status changes.

<AnnouncerProvider>{children}</AnnouncerProvider>

function RefreshButton() {
  const announcer = useAnnouncer();
  return (
    <Button onClick={() => announcer.announce("Rows refreshed")}>
      Refresh
    </Button>
  );
}

#Patterns

Announce table refreshes, toast-like async progress, background sync, and validation summaries without forcing focus away from the user's current task.

#Accessibility

politeness="polite" maps to role="status". politeness="assertive" maps to role="alert". Keep messages concise and avoid repeating the same phrase in rapid loops.

#API

• message: announcement text.
• politeness: polite or assertive.
• atomic: whether the whole region is announced. Defaults to true.
• visuallyHidden: hide from sighted layout while keeping screen reader access. Defaults to true.

#Styling

LiveRegion uses .eui-live-region classes and FroggDesign tokens for layout, state, focus, and disabled styling.