Raised Panel 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. One answer is open at a time. Add multiple to the Accordion to let several stay open.

No. It follows your theme: the shell is a tinted step off the page, and the panel is your card colour with a shadow and a ring, so it reads as lifted in a light theme, where card and page are nearly the same, and in a dark one. No dark scope is set anywhere, so nothing is a fixed colour.

Yes. Each Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found": search engines see all 7, 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. Tab then continues to the contact link in the foot.

It is a ghost button (href="#"): point Write to the sleep team at your help desk or a mailto: address. The block has no other button. The button renders the link it's given with render, with nativeButton={false}.

The header and the panel fade up once when the page loads, with a CSS transition, and each row's square fills in as it opens. With reduced motion the entrance is off. The answers also open and close at once, with no height animation.

The header and the shell sit between the rails, the rows fill the panel, and the contact line stacks above its link. A question that doesn't fit wraps to a second line beside its square, and nothing scrolls sideways at 320 pixels.