Accordion Step By Step Blog Block for React

Edit STEPS: each has an id, a title, the minutes it takes, its text and what you need. The header's "2 of 5 steps done, about 40 minutes to go", the markers and the "Step 3 of 5" caption derive from it. START_DONE and START_OPEN set what is ticked and open on first show. The drawing is chosen by the step's id, so a new step needs a drawing with the same id.

"Done, next step" marks the step done, opens the next one and moves focus to its heading, because the button leaves with the panel it was in. On a step you have already done the button reads "Mark as not done" and takes the tick back. A polite status says what happened ("Step 3 done. Step 4, Pare to a snug fit, is open.").

Enter and Space open a step, and one step is always open. This accordion has no arrow-key navigation of its own: Tab moves between the step headings.

Yes. The Accordion takes hiddenUntilFound, so every closed step stays in the markup as hidden="until-found".

No. Each is a small SVG in the page's own greyscale: gauge lines, a chopped mortise, a sawn tenon, a pared fit, a clamp. They are hidden from assistive technology, because the step's text says the same thing, and they never mirror in a right-to-left page.

On a wide screen no: the row is held at a fixed minimum height, so the drawing and the steps stay put. On a phone the page grows by the open step's text and drawing, as any accordion does.