Composed Empty State

Accessibility

Import ComposedEmptyState, ComposedEmptyStateSize, ComposedEmptyStateTone from @prepared911/ui/blocks/composed-empty-state.

The title and description are EmptyState's text. EmptyState renders the title as a paragraph, not a heading, so the block adds no heading to the page outline. A page that needs one names the region itself.
NoResults is a polite live region (role="status") so a screen reader announces the result of a filter or search without moving focus. announce turns the region on or off for any tone. The block never sets role="alert"; a failure that must interrupt belongs to ErrorBoundary or an Alert.
The illustration and the icon are decorative and hidden from assistive technology. The copy carries the meaning, so a region with only an illustration and no title is not valid.
The actions are the caller's Buttons and Links. The block adds no handler and no tab stop of its own; Tab reaches the primary action, then the secondary action.
Long copy wraps inside the column, including a word longer than the column. At 320 CSS px or 200% text the actions wrap and no control passes the container edge.
Layout uses logical properties, so the primary action sits at the inline-start of the secondary action in both directions.

Accessibility

Import ComposedEmptyState, ComposedEmptyStateSize, ComposedEmptyStateTone from @prepared911/ui/blocks/composed-empty-state.

The title and description are EmptyState's text. EmptyState renders the title as a paragraph, not a heading, so the block adds no heading to the page outline. A page that needs one names the region itself.
NoResults is a polite live region (role="status") so a screen reader announces the result of a filter or search without moving focus. announce turns the region on or off for any tone. The block never sets role="alert"; a failure that must interrupt belongs to ErrorBoundary or an Alert.
The illustration and the icon are decorative and hidden from assistive technology. The copy carries the meaning, so a region with only an illustration and no title is not valid.
The actions are the caller's Buttons and Links. The block adds no handler and no tab stop of its own; Tab reaches the primary action, then the secondary action.
Long copy wraps inside the column, including a word longer than the column. At 320 CSS px or 200% text the actions wrap and no control passes the container edge.
Layout uses logical properties, so the primary action sits at the inline-start of the secondary action in both directions.