Tags FAQ Block for React

Edit TAGS (the tag names) and QUESTIONS at the top of the file: each question has an id, the question, its answer and its tags, a list of names from TAGS. The count beside each tag in the cloud is worked out from the questions. Two tags per question reads well; more crowds the rows.

No: one tag is the filter at a time, and choosing another replaces it. For a union of several, see the Multi Select FAQ; for an intersection, make tag a list and filter with every.

Every tag, in the cloud and under a question, is a toggle button that says whether it's pressed; Tab reaches it and Space or Enter turns it on or off. The tags sit under the question's heading, outside its button, so they don't nest controls. The status line is a polite live region and focus stays where it was.

No: a question that doesn't carry the chosen tag is removed from the page, not hidden. Closed answers of the questions that are shown: 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 one that holds a match.

The title, the sentence and the tag cloud stack above the rows, the cloud wrapping onto two lines, and the split divider becomes a rule across the block. The tags under each question wrap, and nothing scrolls sideways at 320 pixels.

Each question ends in a plus that turns 45 degrees into a cross while its answer is open; under reduced motion it changes without turning. It's a decoration, and the button's expanded state is what a screen reader hears.