Split View FAQ Block for React

Edit QUESTIONS at the top of the file: each entry has an id, a topic (shown as a badge above the answer), the question and its answer, one to three sentences. The list, the select, the panel and the "Question 4 of 8" count are all built from it. Keep it to about eight: past that, the list outgrows the panel and categories serve readers better.

Tab moves into the list, which is a listbox with one tab stop. Up and Down move the selection and the answer follows; Home and End jump to the first and last question. The Next question button goes to the following question and wraps to the first after the last. Focus never moves on its own: when the selection changes, a polite status line announces "Question 4 of 8" with the question. Hover alone doesn't select, only a click or the keys do.

No. Every answer is stacked in one grid cell and only the selected one is visible, so the panel is as tall as the longest answer. The hidden answers are in the markup but out of the accessibility tree.

The catalog's Listbox is built on Ark UI on all four React bases, so the block imports createListCollection from @ark-ui/react/collection to describe the items, on Base UI, Radix and React Aria too. The Vue, Svelte and Solid versions use the matching Ark package.

It moves the selection to the following question and wraps to the first after the last; it is a button, not a link, because nothing navigates. Focus stays on it, so a reader can press it again and again to read through the list. It takes an onClick handler.

Below the lg breakpoint the list is replaced by a native select named Question, full width under the header, and it drives the same panel. The panel sits under the select inside a lighter frame, with the Next question button at its foot.