Numbered Onboarding Steps Banner Block for React

Edit STEPS, the titles in order, and INITIAL, how many are done when the page loads (3 here, so the demo shows a checklist already under way). A step is done when its index is below the count, so the list can only be finished in order.

The start handler only adds one to the count. Put your real work there: open the step's page, call your API, then raise the count when it succeeds. If the steps are completed elsewhere, drive done from your user's progress instead of the button.

The button you pressed is replaced by the next row's, so focus moves to that Start button, and Tab carries on from there. After the last step there is no button, so focus goes to a line that only screen readers see ("All five steps are done."), and Start over appears in the header.

The count is a polite live region: pressing Start announces "4 / 5 done", and finishing announces "All set". Each row says its state in words ("Done: Create a workspace", "Next: Run a first build"), the current step is marked aria-current="step", and the Start button's name includes its step ("Start: Run a first build").

Every row is 40 px and the header is 48 px in every state, so completing a step, the count changing to "All set" and the Start over button all happen without moving the page. Keep titles to one line: they truncate rather than wrap.

The card shrinks to the screen, with titles of about 20 characters or fewer fitting beside the Start button at 320 pixels. In a right-to-left layout the number moves to the start and the button to the end of each row.