📝 Description

A stepper guides users through any linear, multi-step process. It shows completed, current, and upcoming steps in a visual, interactive format to help users understand their progress.

🔗 View in Figma

♿ Accessibility

• Use semantic list and listitem roles to convey structure to assistive technologies.
• Add visually hidden text for screen readers to announce which steps are current or completed.
• Use appropriate ARIA attributes like aria-current="step" to indicate the active step.
• Use aria-live="polite" attribute so that the current step is announced when it changes.
• Ensure the component is usable in High Contrast Mode (HCM) for users with visual impairments.

⚙️ Requirements

• Support adding and removing steps asynchronously.
• When there isn’t enough space, hide step names (except for the current step) to maintain layout without breaking usability.
• Ensure responsive behavior across breakpoints.

🧪 Testing

No Current Step

• All steps are not started.
• All steps are marked as completed.

Current Step Scenarios

• First step is current.
• A middle step is current.
• Last step is current.

Asynchronous Behavior

• A step is added while the stepper is visible.
• A step is removed while the stepper is visible.

Step Count Edge Cases

• 1 step (should throw an error).
• 3 steps (minimum functional case).
• 10 steps (should handle overflow gracefully per Figma guidelines).

💻 Proposed implementation

<post-stepper current-index="1" current-label="Aktuell" completed-label="Abgeschlossen">
  <post-stepper-item>
    First Step Name
  </post-stepper-item>

  <post-stepper-item>
    Second Step Name
  </post-stepper-item>

  <post-stepper-item>
    Third Step Name
  </post-stepper-item>
</post-stepper>

• The current-index is zero-based:
  • current-index="0" means the first step is active.
• Special cases:
  • current-index="-1" (or any negative number) means no steps have started — all steps appear as not started.
  • current-index greater or equal to the total number of steps (e.g., current-index="3" when there are 3 steps) means all steps are completed.

🔗 References

• WAI: Multi-page Forms Tutorial

📃 Tasks

• Implement component according to design
• Create storybook documentation
• Add functional tests
• Add integration tests for react
• Add integration tests for Angular
• Add visual regression tests
• Design review