Hover Preview FAQ Block for React

Edit QUESTIONS at the top of the file: each entry is an id, the question, a one-line summary and the full answer. The summary appears in the hover card, in the text tied to the question, and on touch screens under it. OPEN_QUESTION names the row that's open on load; set it to an id that doesn't exist to start with all of them closed.

When a mouse rests on a question for a moment, and when keyboard focus lands on one. It closes when the pointer or the focus leaves, and on Escape. Opening the row with Enter, Space or a click doesn't hide it, because the answer opens beneath it. A touch screen never shows the card, since a tap goes straight to opening the row. The question button is the hover card's trigger: HoverCardTrigger renders it through a render function, so the card anchors to the row.

Each question button has aria-describedby pointing at the summary text, so a screen reader reads the summary after the question, with no hover needed. That text is hidden visually on a wide screen with a mouse (it would repeat the card) and shown under the question on phones and on any touch device, so nobody has to find the card to read it.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found": search engines see all six, 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 the Track a parcel link in the header to each question in turn, Enter or Space opens and closes one, and one answer is open at a time.

Below the lg breakpoint the header stacks above the questions, the rows run from rail to rail, and each shows its summary under the question since there's no hover. Nothing scrolls sideways at 320 pixels.