Dual Column Accordion FAQ Block for React

Edit CLASSES and STUDIO at the top of the file: each entry is an id, the question and its answer, one to three sentences. OPEN_CLASSES and OPEN_STUDIO name the question open in each list on load; set one to an id that doesn't exist to start with that list closed. Keep each list to about four: past that, a column gets long next to its neighbour. Each list opens one answer at a time. Add multiple to the Accordion to let several stay open.

Yes. Each Accordion takes hiddenUntilFound, so every closed answer stays in the markup as hidden="until-found": search engines see all 8, 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, so a screen reader's headings list shows every question. Tab moves from question to question, Enter or Space opens and closes one, and the button says whether it's expanded. The open answer is labelled by its question. Tab then continues into the second list.

It is a ghost button with an arrow (href="#"): point See class dates at your schedule. The block has no other button, and the Shine Button is left for a page's one main action. The button renders the link it's given with render, with nativeButton={false}.

The header and the band fade up once when the page loads, with CSS transitions, and a chevron turns over as an answer opens. With reduced motion the entrances are off. The answers also open and close at once, with no height animation.

Below the lg breakpoint the two lists stack, with a rule and + marks between them where the divider was, and the rows run from rail to rail. A question that doesn't fit wraps to a second line with its chevron beside the first, and nothing scrolls sideways at 320 pixels.