Onboarding FAQ Block for React

Edit STEPS at the top of the file: each entry is an id, the question, its answer and its minutes, a number. The badge in the header is TOTAL_MINUTES, added up from the same list, and each row's duration comes from its own entry, so the total can never disagree with the steps. OPEN_STEP names the step that's open on load.

Each step draws its own short hairline down its start side, with CSS: the first starts at its circle and the last stops at its own, so the rail never sticks out above or below. The circle sits on top of it with a solid background. Because the line belongs to the step, it grows with the step when an answer opens. The circle of the open step turns solid with the foreground colour, and the numbers are decoration: a screen reader hears "Step 2:" before each question instead.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found" and the browser's find in page opens the one that holds a match.

Each step's title is a button inside its own h3 under the section's h2, so a screen reader's headings list shows all five, and the button says whether it's expanded. Enter or Space opens and closes one, and the duration is read as part of the button's name. Tab moves from step to step.

Add multiple to the Accordion to let several stay open.

The rail and the fill on each open circle work the same either way.

The rail and the circles stay at the start side, the question wraps beside them, and the duration badge moves under the question so the title keeps its width. The answers keep their indent so they stay under the title, and nothing scrolls sideways at 320 pixels.