FAQ with Call to Action Block for React

Edit QUESTIONS at the top of the file: each entry has an id, the question, its answer, the label of the button in action and a primary flag. The button always reads action; its link is url, "#" until you set it, so give each question its own address there. Exactly one entry should have primary: true: that's the Shine Button, and the rest are outline buttons.

Because the first screen should have a single main action. The question that's open on load holds the Shine Button, so the button shows without a click; opening another question shows an outline button. If you open a different question on load, give it the primary flag instead.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found", 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. Enter or Space opens and closes it, and the button says whether it's expanded. A closed answer's button can't be reached with Tab, so Tab moves from question to question, and into an open answer's button only while it's open. Tab alone moves between questions on this library: its accordion doesn't take arrow keys.

Each button renders the link it's given with render, with nativeButton={false}.

Link text says where it goes, so keep labels specific ("Download the security policy", not "Learn more").

The header and rows fade up once on load, an answer eases open under its question, and the chevron turns over while it fills in. With reduced motion the entrances are off and the chevron swaps without turning. The answers also open and close at once, with no height animation.