JSON-LD FAQ Block for React

One FAQPage object with a Question for every entry in FAQS, each with its acceptedAnswer text. It's built by faqPageJsonLd(FAQS) at the top of the file and rendered into a script tag, with every < escaped as < so an answer can never close the tag. Edit FAQS and the visible list, the mock and the data all change together. The answers must be plain text: the schema allows a little HTML, but this builder doesn't add any.

Not on request. The mock is an illustration of how marked-up questions can appear; whether a result shows them is up to each search engine, and some now show FAQ results for only a few kinds of site. The markup is still valid, and it's read by other tools that understand structured data, so it's worth keeping honest and in step with the page. Check yours with a rich results test before promising anything.

No: it's drawn from the block's own parts, with a fictional site and address. The search field, site name, title and snippet are decoration and hidden from assistive technology; the two questions in the rich result are a real accordion, so they can be opened with a keyboard. They come from the first two entries of FAQS.

Yes. The main Accordion takes hiddenUntilFound, so closed answers stay in the markup as hidden="until-found" and the browser's find in page opens the one that holds a match.

Each question is a button inside its own h3 under the section's h2, and the mock's two questions are buttons inside h4s in a captioned figure. Tab moves through all of them, Enter or Space opens one, and each button says whether it's expanded.

Below the lg breakpoint the mock goes under the questions, under a rule with + marks, at the full width of the column. On wider screens it sticks near the top while you read the list.