Categorized FAQ Block for React

Edit TOPICS at the top of the file: each topic has an id, a label and its questions (an id, the question and its answer, one to three sentences). The count on each tab is the length of that list, so it never drifts, and the first question of every topic opens when its tab does. Keep it to about five topics and four questions each: more than that wants a search.

The tabs are a real tab list named "FAQ topics": the arrow keys move between them (mirrored in a right-to-left layout), Home and End jump to the first and last, and Tab moves on into the open panel. Each question is a button inside its own h3 under the section's h2, and Enter or Space opens it. Focusing a tab selects it, as on the other libraries; inside a panel, Tab moves from question to question.

Yes, the panels of the topics you aren't looking at stay in the page, hidden. Each panel takes keepMounted, and each Accordion hiddenUntilFound, so a closed answer stays in the markup and the browser's find in page opens it.

Every panel has the same minimum height, about the tallest topic with its first answer open, so a shorter topic leaves quiet space under its rows instead of pulling the contact line up. Opening more answers in a panel still grows it, as any accordion does.

The tab list becomes a row you scroll sideways, with a fade at its end to say there's more, and the focused tab scrolls into view. The rows run from rail to rail, long questions wrap beside their chevron, and nothing scrolls the page sideways at 320 pixels.

It's a link (href="#"): point Ask a bookkeeper 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}.