Infinite Scroll FAQ Block for React

Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer. FIRST is how many show at the start and STEP is how many each press adds; the total, the count and the numbers beside the rows all come from the list, so a longer one just works. OPEN_QUESTION names the one that's open on load.

A scroll listener that adds rows as you reach the end is invisible to a keyboard, traps the footer out of reach and surprises screen-reader users. A button is a real control: Tab reaches it, Enter or Space presses it, and the polite status line tells a screen reader how many questions are showing now. Pressing it keeps focus on it, so you can keep pressing it, and when the last four arrive it turns into the closing line, which takes focus so the page doesn't jump to the top.

No: only the rows that are showing are rendered, so the first six are what search engines and server rendering see until someone presses the button. If every question must be indexed, raise FIRST to the full count and remove the button, or add structured data built from the same QUESTIONS array. Within the rows that show, every closed answer stays in the markup as hidden="until-found" (the Accordion takes hiddenUntilFound), so the browser's find in page opens the one that holds a match.

Each question is a button inside its own h3 under the section's h2, and its number is decoration that a screen reader skips. Tab moves from question to question and on to the Show more button, Enter or Space opens and closes a row, and one answer is open at a time.

The header and list fade up once when the page loads, a row that Show more adds fades in over 300 milliseconds, and the chevron turns as a row opens. With reduced motion the entrance is off, the new rows simply appear and the chevron turns without animating. The answers also open and close at once, with no height animation.

The rows' content takes the full width less a small margin, so the numbers, questions and chevrons stay on one line where they fit and wrap where they don't, the button sits under the count, and nothing scrolls sideways at 320 pixels. Each press adds four rows, never a long wall at once.