The checkout progress bar uses aria-current step so screen readers know where you are

The checkout wizard has four steps — Package, Details, Pay, Done. The progress indicator at the top is a nav element with an ordered list inside. Each step is a list item. The active step carries aria-current set to step. That single attribute tells a screen reader exactly where the user is in the flow without them needing to parse visual cues like filled circles or accent colours. The visual layer is built on three states per step — completed, active, and future. A completed step shows a checkmark SVG inside a translucent accent circle. The accent colour comes from the service CSS custom property so the progress bar matches the page theme automatically — purple for software, cyan for audio, emerald for production. The active step fills its circle solid with the accent and renders the step number in black for maximum contrast. Future steps use a glass background with muted text. The connector lines between steps fill with the accent colour as you progress, creating a visual trail of completion. On mobile, the step labels disappear entirely. Only the numbered circles remain in a tight horizontal row. The labels are hidden with a responsive class — hidden on base, inline on sm breakpoint. The circles are twenty-eight pixels square, well above the minimum touch target for a non-interactive indicator. The whole nav is sixty-seven lines of code including the type definition. It takes one prop — currentStep — and derives everything else from the step index. No animation library, no transition group, no spring physics. Just conditional classes based on array position.