TaskList

Navigation rail for a long form done in parts, in any order and over several sessions: each part with its status, the open part with its steps.

Status: alpha. Group: navigation. Markdown version: /design-system/components/task-list.md

When to use

Navigation rail for a long form done in parts, in any order and over several sessions: each part with its status, the open part with its steps.

Do not use it for a short linear flow that must be done in order; a simple "Step 2 of 3" caption is enough there.
Do not show a status nobody can act on; "Cannot start yet" is for a part that depends on another.

The contract names no look-alike with a deciding condition.

TaskList props
Prop	Type	Default	Description	Required
`tasks`	`TaskListTask[]`	none	Tasks in order. Each has id, label, status, an optional hint and steps, and `unnumbered` to leave a closing task such as "Check and submit" without a number.	Yes
`label`	`string`	none	Accessible name of the navigation landmark, for example "Intake parts".	Yes
`currentTaskId`	`string`	none	The task the person is working on; its steps are listed.	No
`currentStepId`	`string`	none	The step on screen, marked with aria-current="step".	No
`onSelect`	`(taskId: string, stepId?: string) => void`	none	Called when a task or step is chosen. Every task can be opened, so past steps stay reachable (Baymard: people click step indicators to go back). Tasks with status "cannotStart" are not interactive.	No
`statusLabels`	`Partial<Record<TaskListStatus, string>>`	none	Overrides the translated status words.	No
`className`	`string`	none	Merged onto the nav element.	No

No variant dimensions and no props with a fixed set of values.

The contract records no invalid combinations.

TaskList keyboard behaviour
Key	Behaviour
Tab	Moves through the parts and the open part's steps in order.
Enter / Space	Opens the focused part or step.

Every item under When not to use is a MUST NOT. MUST and SHOULD follow RFC 2119.

TaskList rules
Level	Rule	How it is checked
MUST	ARIA: Renders a <nav> landmark named by `label`.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: The step on screen carries aria-current="step"; with no step, the open part does.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Each part's status (and hint) describes its button through aria-describedby.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	ARIA: Completed steps add a visually hidden "done"; the check icon is decorative.	Not yet verified: no evidence record. WCAG 4.1.2.
MUST	Required stories produce no axe violations at the configured severity.	Automated by `npm run test:stories:matrix:ci`. WCAG 2.5.8.
MUST	The accessibility tree (role, name, state) matches the committed snapshot for every required story.	Automated by `npm run test:stories:matrix:ci`. WCAG 1.3.1, 4.1.2.
MUST	The component remains legible and operable under a real browser forced-colors: active pass.	Automated by `npm run test:stories:hc`.
MUST	Every documented keyboard interaction works as specified.	Not yet verified: no evidence record. WCAG 2.1.1, 2.1.2.

In-repo only. TaskList is not exported from @digitaltableteur/react, so there is no public import path.
Alpha components are internal and never exported.