Progressive Disclosure FAQ Block for React

Edit QUESTIONS at the top of the file. Each entry has an id, the question, the one-line short answer that always shows, more (the list that opens, three lines is the right amount) and note (the closing "Good to know" sentence). Add or remove entries freely; the rows, the button ids and the panels are all built from the list.

It's a ghost Button with aria-expanded and aria-controls pointing at the panel it opens, and its label never changes: the chevron turns to show the state. Each row keeps its own state, so any number of them can be open at once. Its screen-reader name includes the question ("Details: Can you cook around my allergies?"), so six Details buttons are never a list of identical names.

Yes. The panel is a grid row that collapses to zero height and is marked inert, so its text stays in the page for search engines and the browser's source, while its list isn't read by a screen reader or reachable with Tab until you open it. Every target uses the same markup, because the block uses the catalog's Button rather than an Accordion.

The header and the list fade up once when the page loads, a panel eases open with a grid-rows transition, and the chevron turns. With reduced motion the entrances are off, a panel opens at once and the chevron turns without animating.

Ask the kitchen team is a link (href="#"): point it at your help desk or a mailto: address. It renders the link it's given with render, with nativeButton={false}.

Below the lg breakpoint the header stacks above the questions and stops being sticky, the rows run from rail to rail under a rule with + marks, and the Details buttons stay a comfortable touch size. The short answers wrap, and nothing scrolls sideways at 320 pixels.