Command Palette 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 palette's groups are the topics in the order they first appear, and the count in the button and the header comes from the array. Nine questions suit a short page; the palette comfortably holds fifty.

While the block is mounted, a keydown listener opens the palette on Command K or Control K and stops the browser's own handling. It reads "Ctrl K" in the markup and switches to "⌘ K" once the page knows it's running on a Mac, so server rendering and hydration agree. On a phone the shortcut hint is hidden, because there is no keyboard to press it on; the button still opens the palette.

To the question's button in the list, with its answer open, so a keyboard user lands where they chose. If you close the palette with Escape instead, focus returns to whatever opened it: the button, or the element that had focus when you pressed the shortcut. The block waits a beat after the dialog closes and then focuses the row, because the dialog hands focus back to the opener first.

By the question's text and topic, anywhere in them, ignoring case. The palette's own fuzzy scoring is replaced by a plain substring match, so "dns" doesn't find unrelated rows.

Groups with no match disappear, and when nothing matches the palette says "No questions match".

Yes. 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 button is named "Search 9 questions" and announces its shortcut, the palette is a dialog with a labelled field and a list you move through with the Up and Down arrows, Enter opens the highlighted question and Escape closes. In the list, each question is a button inside its own h3 under the section's h2; Tab moves between them and Enter or Space opens one.