Toggle All FAQ Block for React

Edit QUESTIONS at the top of the file: each entry is an id, the question and its answer, one to three sentences. ALL is built from the same list, so Expand all always opens every question you've written, and the count always reads from it. OPEN_QUESTION names the one that's open on load; set it to an id that doesn't exist to start with all of them closed.

The block keeps the list of open questions in state and gives it to the Accordion, so a row opened by hand and a row opened by Expand all are the same thing. Expand all sets the list to every id, Collapse all to none, and the count above them ("3 of 8 open") is a polite status line that announces the new number to a screen reader. The Accordion takes multiple, so any number of rows stay open together.

They carry aria-disabled rather than disabled. A button that is really disabled drops keyboard focus the moment it's pressed (Expand all is pressed and then has nothing left to do), so focus would fall to the top of the page. With aria-disabled it keeps focus, looks and reads as unavailable, and pressing it again does nothing.

Yes. The Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found": search engines see all eight, and the browser's find in page opens the answer that holds a match.

Each question is a button inside its own h3 under the section's h2. Tab moves from the two toolbar buttons to the questions, Enter or Space opens and closes one, and every button says whether it's expanded. After Expand all or Collapse all, focus stays on the button you pressed.

Below the sm breakpoint the count sits above the two buttons, both of which stay full size for touch, and the rows run from rail to rail with the chevron at their end. A question that doesn't fit wraps onto a second line, the answers drop to a smaller size, and nothing scrolls sideways at 320 pixels.