Axon 911 Frontend Docs
    Loading navigation…
U
User
Switch to light mode
  1. Blocks
  2. Form Wizard
  3. Accessibility

Form wizard

Accessibility

FormWizard is a modal dialog named by title. Focus stays inside while it is open and returns to the trigger on close.
Stepper
The stepper is a named list (stepperLabel). Every step's state text is read before its label, the current step has aria-current="step", and one polite announcement is made when current changes, never on mount. With selectable steps the stepper is one tab stop and arrow keys move among them.
Focus
  • A step change. Focus moves to the new step's title, an h2 that names the step's form, and the form region scrolls to its top.
  • A blocked Continue. Focus moves to the first invalid field, so the error arrives where the fix is. The footer has no error summary. Errors show as text and an icon, never colour alone.
  • Escape and the close control. Both are Cancel. They call onOpenChange(false, details); details.cancel() keeps the wizard open.
Controls
Continue is never disabled for an invalid or pristine form. While pending the primary is busy and Back is disabled; the stepper takes no selection.
Reflow
Below 640px the rail becomes a horizontal stepper pinned at the top, the header actions and footer wrap, and nothing scrolls sideways at 320 CSS px.
Previous
Form wizard / API and Development
Next
Settings Section / Usage
On this page
Stepper
Focus
Controls
Reflow