Steps

Build a Steps indicator for this checkout as an <ol> of labeled stages, with the current item marked aria-current="step". Show each stage as a numbered circular Steps.Indicator (Material UI StepIcon), join adjacent stages with a StepConnector (Steps.Separator), replace completed numbers with checkmarks, and keep future stages muted. Drive it from one zero-based index (Material UI activeStep / Ant Design current) and derive completed, current and upcoming from that single value; the arrival state should be step 2, Payment, so all three states are visible at once.

Debug my Steps / stepper (aria-current="step", activeStep / current index, StepConnector tint). Rule out: more than one stage carrying aria-current="step", or none at all, so assistive tech announces the wrong position; the zero-based activeStep mixed with the 1-based number printed inside the circle (convert in exactly one place); completed state derived from a separate flag that drifts from the current index, so a checkmark sits ahead of the current stage; the connector fill tracking a different index than the indicators, leaving a tinted line into an upcoming step; the whole thing built as role="progressbar" or a plain bar, so screen readers hear "60%" instead of "Payment, step 3 of 4"; stages rendered as divs with no ordered-list semantics and no accessible name on each step; the step label associated with nothing, so the circle announces a bare number; the index kept only in component state, so a refresh or the browser Back button drops the user to step 1; a validation-gated flow letting a click jump ahead to an unreached stage. The symptom: