Hover Reveal FAQ Block for React

A mouse moving over a row opens it, and so does keyboard focus landing on its question (from Tab, not from a click). Rows only ever open below the one you're on, so nothing slides out from under the pointer: moving down the list keeps the rows above you open, and moving back up closes the ones below. Leaving the list, or moving focus out of it, closes everything that isn't pinned. A click, a tap, or Enter or Space on a question pins that row; doing it again lets it go.

Only a mouse pointer opens rows by hover: touch and pen input skip it, because there is no hover to speak of. A tap pins the row open and a second tap closes it. A keyboard user gets the same reveal from focus, and presses Enter or Space to pin a row. Every route uses the same buttons, so a screen reader announces each question as expanded or collapsed whichever way it was opened.

It marks a row you chose to keep open. A row that's only open because the pointer is over it, or because focus is on it, shows no pin and folds back when you move on. The pin is decoration (the button's expanded state already carries the meaning for a screen reader), and the hint under the title tells sighted visitors what it's for.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found": search engines see all five, 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. Tab moves from question to question, revealing each as it arrives and closing the ones below when you go back. Several rows can be open at once.

The header and the list fade up once when the page loads, an answer eases open under its question and the chevron turns. With reduced motion the entrances are off and the chevron turns without animating. The answers also open and close at once, with no height animation.