Testimonials Speaker Switcher Block for React

Edit SPEAKERS at the top of the file: each entry has an id, the person's name, role, company and initials, and their quote. The chips come from the list, so any number of customers works; four to six fit in one row on a desktop, and a phone scrolls them. The first one in the list is shown when the page loads. Keep quotes to a few lines: the big type is meant for a sentence or two, not a paragraph.

Yes. The chips are one radio group: Tab moves focus to the chosen chip, the left and right arrow keys move to the previous or next chip and choose it, wrapping at either end, and Tab moves on. Each chip shows a focus ring. Unlike the original, the block doesn't listen for arrow keys anywhere on the page, so it never takes the arrows from a visitor who is scrolling or typing somewhere else.

The chips are a radio group named "Choose who is speaking", and each radio is named for its customer, such as "Saskia Vermeer", with the chosen one marked as checked; the avatar initials are hidden. The quote is a blockquote inside a figure with the author as the caption. Nothing is announced when the page loads; once the visitor chooses a customer, the area holds a polite live region and the new quote is read out.

The header and the panel appear without their entrance, and a new quote replaces the old one without the fade. In a right-to-left page the chips run from the end side, the avatar sits on the right of each name, the quote mark moves to the end corner and the text aligns to the end. Quotes and names keep their punctuation in place.

When who says it matters as much as what is said: visitors who recognise a role or a name go straight to it. A switcher shows one quote at a time, so it suits a handful of strong stories. If you want every quote visible at once, use a grid or a wall; if you have many quotes and no names worth choosing by, a carousel pages through them without asking for a choice.