Interview Testimonials Block for React

Edit INTERVIEWEE and the EXCHANGES array at the top of the file. Each exchange has a question, an answer and a time written as you want it shown, such as "12:30". Keep the times in order and inside the length the intro promises; they are typed text, not measured from a recording. Keep answers to one or two sentences: the transcript is meant to be read in a glance, and the link takes people to the full story.

No, they are plain labels. To link to a recording, wrap each chip's time in a link that carries the start time, and keep the sr-only "At" before it so the label still reads as a time. Don't add links to a recording you can't host.

The questions are h3 headings under the section's h2, so a screen reader can jump from question to question. Each answer is a figure with a blockquote, and a hidden caption names the speaker. The exchanges form an ordered list named "The interview", and each time chip is read as "At 12:30".

Below md the first three exchanges show and the other two wait behind the "All 5 questions" button, which reports whether the list is open with aria-expanded and points at the list with aria-controls. From md all five show and the button disappears. Change PREVIEW at the top of the file to show more or fewer first.

It's a link (href="#"): point it at the full case study. It's the block's one primary control; the "All 5 questions" button is an outline button that only shows on a phone. The button renders the link it's given with render, with nativeButton={false}.

Yes. The rail moves to the right and the divider to its other side, the cards use logical sides, the chip keeps its digits in order inside a bdi, and each answer sits in a bdi so its quotation marks stay at the ends of the sentence. The section fades up once on load and nothing else moves; with reduced motion the fade is skipped as well, and the Shine Button's sweep becomes a fade.