Compact FAQ Block for React

Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer, kept to a single sentence so the rows stay compact. OPEN_QUESTION names the one that's open on load; set it to an id that doesn't exist to start with all of them closed. Ten fit in about one screen. 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 10, 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.

Two chevrons sit at the start of each row and one shows at a time: a closed row shows the one that points along the line, which flips to point the other way in a right-to-left layout, and an open row shows the one that points down, which needs no flip. They are decorative; the button's expanded state tells assistive technology which way the row is.

The header and the list fade up once when the page loads, with CSS transitions, and the chevron changes as a row opens. With reduced motion the entrances are off. The answers also open and close at once, with no height animation.

The frame takes the width between the rails. A question that doesn't fit wraps to a second line beside its chevron, answers stay at the same small size, and nothing scrolls sideways at 320 pixels.