Wizard FAQ Block for React

Edit QUESTIONS at the top of the file: each entry is an id, the step name shown on the step list, the question and its answer, one to three sentences. The step list, the "Question 2 of 5" count and the panels are all built from that array, so adding or removing an entry is the only change. Keep it to about five to seven: the numbered steps must fit on one row at 320 pixels.

No. Any step in the list can be opened at once: the steps are not locked, because FAQ answers don't depend on one another. Previous and Next walk the list one question at a time, Previous is off on the first question, and Next on the last question starts again at the first.

The step list is a single tab stop; the arrow keys move between steps, Home and End jump to the first and last, and Enter or Space opens the one that has focus. After any step change the new question's heading takes focus, so a screen reader starts reading where the content changed, and a polite live region says "Question 3 of 5". Focus never moves when the page loads.

The five questions and answers are stacked in one grid cell, with an unseen copy of all of them (hidden from assistive technology and out of the tab order) setting the cell's height. The visible panel fits inside it, so Previous and Next stay where they were under your cursor, and the page below never jumps.

Next is a real button that changes the step on the page, so it stays on the page and doesn't navigate. If the last step should lead somewhere, replace the "Start again" label and handler with a link. Give the Shine Button render with your link and nativeButton={false}.

The header and the card fade up once when the page loads, a step's panel slides in a short way from the reading direction when it opens, and the Shine Button's light sweeps across it once on hover and focus. With reduced motion the panel simply appears and the entrances are off. In a right-to-left layout the slide, the Previous arrow and the step order all follow the reading direction.