Breadcrumb FAQ Block for React

Edit TOPICS at the top of the file: each topic has an id, an icon (any lucide icon), a label and its questions. The cell shows the count from that list. Two to six topics fit the card; four fill a two-by-two grid exactly.

Choosing a cell moves focus to the topic's heading (it takes focus without being a tab stop), so a screen reader announces where you are and the next Tab reaches the first question. Going back through the first crumb puts focus on the cell you opened, so you can open the next one with a key press. Nothing takes focus when the page loads.

It's a navigation landmark named "Help centre" with the current level marked as the current page. The first crumb is a link (href="#help-centre") that returns to the cells and stops the jump; point it at a route if the levels have their own addresses.

Yes: every topic's questions are rendered, and the levels you aren't looking at are hidden with the hidden attribute. Closed answers: 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 cells stay two across, with the icon and the arrow above the name, and the breadcrumb wraps if a topic name is long. The card's body keeps its height on both levels, so going back doesn't shift the page. Nothing scrolls sideways at 320 pixels.

Each cell is a button inside a heading, so Tab walks the four topics and Enter or Space opens one. In a topic, each question is a button inside its own heading.