Components

ResultState

The screen at the end of a task or flow that shows the outcome, what happens next and the next steps.

Storybook: Storybook
Source: Source

Role and semantics

ResultState is a heading (headingLevel, h1 by default), a description, details and actions. The tone is read as part of the title through a visually hidden prefix (“Success: Your application has been received”); the icon is not read.

Keyboard

Key	Behaviour
Tab	Moves to the actions.

Focus

With focusOnMount, the title gets tabindex="-1" and is focused on mount, so when the button of the last step disappears focus does not fall to the page body and the outcome is read at once. The title shows no focus ring.

Example	Output
Success	“Success: Your application has been received, heading level 1”
Error	“Error: The task could not be completed, heading level 1”

Contrast

The title reaches at least 4.5:1; the icon at least 3:1 on its tile.

WCAG 2.2

Criterion	How ResultState meets it	What product teams do
1.4.1 Use of colour	Tone is also given by the prefix and the icon shape.	Nothing.
2.4.3 Focus order	`focusOnMount` moves focus to the outcome.	Turn on `focusOnMount` at the end of a flow.
2.4.6 Headings and labels	The outcome is a heading.	Keep one `h1` per page.
3.3.4 Error prevention	None.	Keep the input of a failed task and offer a retry.