InlineAlert

Role and semantics

By default InlineAlert has no role, because it is part of the page and is read in order. For an alert that appears later, announce gives danger role="alert" and other tones role="status". The icon is not read; the tone is read as a visually hidden prefix (“Information:”, “Success:”, “Warning:”, “Error:”) before the title or message.

Keyboard

Key	Behaviour
Tab	Moves to the actions and the close button.
Enter / Space	Runs the action or the close button.

Focus

The alert takes no focus. When it is closed with its close button, focus moves to the next control, or the previous one, never to the page body.

Screen reader output

Example	Output
Alert with a title	“Warning: Connection is slow. Changes may save with a delay.”
Error with announce	“Error: The form could not be sent…” (at once)
Close button	“Dismiss, button”

Contrast

Text (text-default and text-subtle) reaches at least 4.5:1 on each tone’s background, and the icon at least 3:1. The border is decorative; the background, icon and spoken prefix carry the tone.

WCAG 2.2

Criterion	How InlineAlert meets it	What product teams do
1.4.1 Use of colour	Tone is also given by the icon shape and the spoken prefix.	Nothing.
4.1.3 Status messages	status or alert with announce.	Turn on announce for alerts that appear later.
2.4.3 Focus order	On dismiss, focus moves to the next control.	Nothing.
3.3.1 Error identification	Error tone and prefix.	Describe the error in words.