Testimonial FAQ Block for React

Edit QUESTIONS at the top of the file: each entry carries the question, its answer, and the quote that goes with it (quote, name, initials, role). Keep a quote to one or two sentences and make it about the question it sits beside, not a general compliment. Add or remove entries freely: the panel is built from the same list.

The Accordion is controlled: opening a question sets it as the current one, and the panel shows that question's quote. Closing the open question keeps its quote on show, so the panel is never empty. One question is open at a time, and the first is open on load.

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

Yes. All five are rendered, stacked in one grid cell, and the ones not showing are invisible with no opacity, which also hides them from assistive technology, so a screen reader reads only the current quote. Each is a figure with a blockquote and a figcaption. The avatars carry initials and are hidden from screen readers, since the name is in the caption.

Each question is a button inside its own h3 under the section's h2, so a screen reader's headings list shows them all. 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.

Below the lg breakpoint the header, the questions and then the quote panel stack in one column, with a rule between the questions and the panel. The panel isn't sticky there. Opening a question changes the quote under the list, so it can be below the fold on a short screen; keep the list to five or fewer.

The header and the questions fade up once when the page loads, and the quote crossfades when the question changes. With reduced motion the entrances are off. The answers also open and close at once, with no height animation.