Mega Help Index FAQ Block for React

Edit TOPICS at the top of the file: each topic has an id, a title and four questions, each with an id, the question and its answer. The panel's stack of answers is built from the same data (ALL). Four columns of four fits the grid; fewer questions leave a column short, more make the columns uneven.

Every answer is stacked in one grid cell and only the chosen one is visible, so the panel is as tall as the longest answer and nothing shifts. The buttons carry aria-expanded (true for the open question) and aria-controls pointing at the panel, and a polite status line says which question is showing. Focus stays on the button you pressed.

The panel scrolls into view, but only if it is out of sight: the block calls scrollIntoView({ block: "nearest" }) on it, so on a desktop where both are visible nothing moves, and on a phone the answer comes to the top. It never moves focus.

The topic names are h3 headings and the questions are buttons in real lists, so Tab visits them in reading order and Enter or Space chooses one. There are no arrow-key shortcuts between columns.

The panel stays first, then the topics stack one column per row below sm and two across from sm, four across from lg. Questions wrap to a second line when they must, and nothing scrolls sideways at 320 pixels.