⋅
Components
Components

Wizard

Nudges users to complete several steps.

GuidelinesReactAccessibility
GitHub
GitHub

Accessibility

The Wizard component has been designed with accessibility in mind, providing a step-by-step navigation pattern that is fully keyboard accessible and screen reader compatible.

Accessibility Props

Wizard props:

NameTypeDescription
idstringRequired. Provides a unique identifier for the wizard, used for ARIA relationships between the toggle button and wizard content in compact (mobile) mode.
labelClosestringSpecifies the accessible label for the close button in compact mode. Default is “Close”.
labelProgressReact.NodeProvides progress information that is announced by screen readers in compact mode, typically showing current step and total steps (e.g., “Step 2 of 5”).

WizardStep props:

NameTypeDescription
titlestringRequired. Provides the accessible name for each step, announced by screen readers when navigating through the wizard.
isCompletedbooleanWhen true, displays a visual checkmark icon instead of the step number. This is purely visual and does not affect screen reader announcements. This is useful when you want to indicate that a step has been completed.

Automatic Accessibility Features

Wizard component:

  • The component automatically manages ARIA attributes in compact mode:
    • aria-controls connects the toggle button to the wizard content
    • aria-expanded reflects the open/closed state of the wizard
  • Focus management is handled automatically:
    • In desktop mode, focus is properly managed when navigating through the wizard
    • In compact mode, focus is properly managed when opening/closing the wizard
  • Semantic structure is handled automatically:
    • The component renders as a semantic <nav> element with an unordered list structure
    • In compact mode, the wizard opens in a modal with proper focus trapping and focus management

WizardStep component:

  • The component automatically manages ARIA attributes:
    • aria-current="step" is applied to the currently active step to indicate the user’s position in the wizard
    • role="button" and tabIndex="0" are applied to clickable steps in desktop mode
  • Focus management is handled automatically:
    • Interactive steps are included in the tab order and can be activated with keyboard
  • State management is handled automatically:
    • Step status (completed, available, disabled) is communicated through visual styling and ARIA states

Best Practices

  • Always provide a descriptive labelProgress that clearly indicates the user’s position in the process (e.g., “Step 2 of 5”).
  • Use clear and concise step titles that describe the content or action for each step.
  • Ensure the id prop is unique across the page to avoid conflicts with ARIA relationships.
  • Consider the step sequence carefully - users should be able to understand their progress and what comes next.
  • In compact mode, the wizard opens in a modal, so ensure the rest of your interface can handle the modal overlay appropriately.

Keyboard Navigation

The Wizard component supports the following keyboard interactions:

Desktop mode:

  • Tab: Moves focus to the next available (clickable) step
  • Shift + Tab: Moves focus to the previous available step
  • Enter: Activates the focused step and triggers the onChangeStep callback

Compact (mobile) mode:

  • Tab: Moves focus to the wizard toggle button
  • Enter/Space: Opens the wizard modal
  • Tab (within modal): Navigates through available steps and the close button
  • Enter/Space (on step): Selects the step and closes the modal
  • Enter/Space (on close button): Closes the modal
  • Escape: Closes the modal (handled by the Modal component)

Example

<Wizard
  id="booking-wizard"
  activeStep={1}
  completedSteps={2}
  labelProgress="Step 2 of 5"
  onChangeStep={stepIndex => setActiveStep(stepIndex)}
>
  <WizardStep title="Search flights" />
  <WizardStep title="Passenger details" />
  <WizardStep title="Select seats" />
  <WizardStep title="Add extras" />
  <WizardStep title="Payment" />
</Wizard>

Screen reader announces, when focused on the active step in desktop mode: “Passenger details, current step, button” Screen reader announces, when focused on the toggle button in compact mode: “Step 2 of 5, Passenger details, collapsed, button, group” Screen reader announces, when focused on the active step in compact mode: “Passenger details, current step, button, group”