Avatars FAQ Block for React

Edit TEAM (an id, a first name, the initials, the full name and a role) and set each question's by to a person's id. The stack in the header, the names under it and the signatures are all built from the same list. To use a photo, add an AvatarImage before the fallback: the initials show until it loads, and if it fails.

Edit QUESTIONS: each entry is an id, the question, its answer and by. 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. One answer is open at a time. Add multiple to the Accordion to let several stay open.

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

No. The stack in the header is hidden from assistive technology, because the line beside it names everyone in words. In each answer the signature reads "Answered by" and the person's name and role as text, and its small avatar is decoration.

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.

The stack and the names sit on one row under the title, the avatars stay at 40 pixels, the rows run from rail to rail, and a long question wraps with its chevron beside the first line. Nothing scrolls sideways at 320 pixels.