$ rezi
Widgets

Focus Announcer

Displays a live text announcement for the currently focused widget.

Displays a live text announcement for the currently focused widget.

Usage

ui.focusAnnouncer()

ui.focusAnnouncer({
  emptyText: "No focus",
})

Props

PropTypeDefaultDescription
emptyTextstring-Text shown when no widget is focused
styleTextStyle-Optional style override
keystring-Reconciliation key

Behavior

  • Renders the focused element's computed announcement string.
  • Uses semantic labels when provided via accessibleLabel.
  • Includes field metadata in announcements (for example required/error context).
  • Renders emptyText when focus is null.

Example

ui.column({}, [
  ui.focusAnnouncer({ emptyText: "No focus" }),
  ui.field({
    label: "Email",
    required: true,
    error: state.errors.email,
    children: ui.input({
      id: "email",
      value: state.email,
      accessibleLabel: "Email input",
      onInput: (value) => app.update((s) => ({ ...s, email: value })),
    }),
  }),
])

On this page