Keyboard Navigation FAQ Block for React

Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer. The numbers in front are drawn from the position, so reordering renumbers them. The legend reads SHORTCUTS: each is a label, the caps drawn on the keys and the keys (as KeyboardEvent.key values) that light it.

A handler on the list's wrapper hears the keys that bubble up from the question buttons. For the Up and Down arrows, Home and End it moves focus to the right button, wrapping at the ends, unless the accordion already did: it checks whether the key was prevented, so a key is never handled twice. Enter and Space are the buttons' own. This accordion has no arrow-key navigation of its own, so the block's handler provides it: the same keys, the same wrapping.

It lists the keys and lights the row of the one you press, for as long as it's held, and says "Question 3 of 8" for the row that has focus. It's decorative: the keys work the same without it, and a screen reader doesn't read the live line, because it already hears the focus move. It is hidden below md, where there's usually no keyboard.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found".

Yes. The focused question gets a muted background and a three-pixel ring inside its row, drawn for keyboard focus only, so a click doesn't leave a mark. The ring stays visible in every theme, because it uses the theme's ring colour.

Each question is a button inside its own h3 under the section's h2, so the headings list shows all eight, and the button says whether it's expanded. The key legend is a list with a name, so its content can be read, and it carries no information the page needs.