Multi Select FAQ Block for React

Edit TOPICS (an id and a label) and QUESTIONS (an id, the question, its answer and the topic it belongs to) at the top of the file. The number on each chip is counted from QUESTIONS, and so is the line under the chips. A question belongs to one topic; to let it match several, give it a topics array and test it with some.

The chips are a union: a question shows when any of the topics that are on matches it. With none on, every question shows. If you want an intersection, switch the filter from includes to every over a topics array.

The chips are toggle buttons in a fieldset named "Topics": Tab moves between them, Space or Enter turns one on or off, and each one says whether it's pressed. The count under them is a polite live region, so a change is announced without moving focus. Each question is a button inside its own h3.

The list keeps a minimum height of about five rows, so even the shortest result leaves the block's closing line where the eye expects it, and the Clear button stays in place (hidden, not removed) while no chip is on. A list that shrinks from ten rows to two does still get shorter, as the visitor asked it to.

No: a question that doesn't match is removed from the page, not hidden, so only what the chips show is rendered. If search engines should see every answer, render the unfiltered list on the server and filter it in the browser, or add structured data built from QUESTIONS.

It's a link (href="#"): point Message the gear team at your help desk or a mailto: address. It's an outline button, so the block has no primary action of its own. The button renders the link it's given with render, with nativeButton={false}.