Numbered FAQ Block for React

Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer, one to three sentences. The numerals are made from each row's position, zero-padded, so adding, removing or reordering a row renumbers the rest. OPEN_QUESTION names the one that's open on load. Eight fit the layout. One answer is open at a time. Add multiple to the Accordion to let several stay open.

Yes. Each Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found": search engines see all 8, and the browser's find in page opens the answer that holds a match.

Each question is a button inside its own h3 under the section's h2, so a screen reader's headings list shows every question. Tab moves from question to question, Enter or Space opens and closes one, and the button says whether it's expanded. The open answer is labelled by its question. The numerals are decorative and hidden from assistive technology, so a screen reader reads the question alone.

The numerals sit in a fixed-width column at the start of each trigger, and the same width is the indent of every answer, so the two stay aligned. The hairline is a narrow absolute box the same width, drawn by Guides, which gives it + marks where it crosses the band's top rule. On a phone the margin is narrower, and the numerals and the line stay.

The header and the band fade up once when the page loads, with CSS transitions. The numeral's colour and the arrow's turn change as a row opens. With reduced motion the entrances are off and the arrow flips without turning. The answers also open and close at once, with no height animation.

The rows run from rail to rail and the numeral margin steps down to 3.5 rem. A question that doesn't fit wraps to a second line, the arrow stays at the end, and nothing scrolls sideways at 320 pixels.