Accordion 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. 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. Keep it to about eight: past that, a long accordion buries the last questions, and categories or a search serve visitors better. One answer is open at a time. Add multiple to the Accordion to let several stay open.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found": search engines see all seven, 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 all seven. Tab moves from question to question and on to the contact links, Enter or Space opens and closes one, and the button says whether it's expanded. The open answer is labelled by its question.

Both are links (href="#"): point Write to support at your help desk or a mailto: address, and Read the docs at your docs. Write to support is the block's one Shine Button: a band of light sweeps across it once on hover and keyboard focus. Each button renders the link it's given with render, with nativeButton={false}.

The header, the questions and the contact prompt fade up once when the page loads, with CSS transitions (on a phone the contact prompt, below the first screen, simply appears), and an answer eases open under its question while the plus beside it turns into a minus. With reduced motion the entrances are off and the plus becomes a minus without turning. The answers also open and close at once, with no height animation.

Below the lg breakpoint the title and sentence stack above the questions, the rows run from rail to rail under a rule with + marks, and the contact prompt follows the last question. A question that doesn't fit wraps to a second line with its plus beside the first, the answers drop to a smaller size, and nothing scrolls sideways at 320 pixels.