Floating Search FAQ Block for React

Edit QUESTIONS at the top of the file: each entry is an id, its topic, the question and its answer. The bands are the topics in the order they first appear, with their counts computed from the array. Keep the questions in each band together, as the bands are drawn in that order.

The pill is position: sticky at top-2, inside the block's column, so it follows you down the list and stops at the end of the block. It works because no ancestor clips overflow on the vertical axis: the section only clips sideways, which sticky positioning allows. If you put the block inside a scroll container, the pill sticks to that container instead; give the container overflow: clip rather than hidden or auto to keep it sticking to the page.

The question's words and its topic, ignoring case and accents, anywhere in them: "bike" and "on board" both find the bike question. It doesn't read the answers, so what you see in a row is what matched. To include them, add item.answer to the text compared in matches.

No. The list has a floor height, so filtering to two questions leaves the space below intact; the pill's count is the only part that changes. If nothing matches, an empty state says "No questions match" with the typed words and a Clear search button that also returns focus to the field.

Yes, until you search. The Accordions take hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found". Questions that don't match a search are removed.

The field is named "Search the questions" and the pill's count is a polite status ("7 of 12"). The topic titles and the questions are all h3 headings under the section's h2, so a headings list shows the topics and every question. Tab moves from the field to the Clear button and down the questions; Enter or Space opens one. Each topic is its own accordion.