Testimonials Auto-Advancing Tabs Block for React

Edit VOICES at the top of the file: each entry has an id, the tab's label and hint, and the customer's quote, name, role, company and initials. The tabs and the panels come from the list, so two to five tabs work. The eight seconds are the duration-[8000ms] class in the FILL constant; change it there and in the status text, and give longer quotes more time, since a visitor has to finish reading before the tab changes.

The underline is a bar that slides in with a CSS animation (animate-in with a slide from the start edge, linear, eight seconds). It's there only on the tab that is selected, so selecting a tab starts its animation from zero. When the animation ends, the browser fires animationend and the block selects the next tab; there is no setTimeout or interval. Because it's a CSS animation, the pause is animation-play-state: paused, which freezes the bar where it is and lets it carry on from the same point.

Four ways. The pause button in the header stops it until it's pressed again; it's a toggle, announced as pressed while paused, and the line next to it changes to "Paused". Moving the pointer over the tabs or the quote, or moving keyboard focus into them, holds the underline where it is until the pointer or focus leaves. Picking another tab stops the changes, so the quote the visitor chose stays. And with reduced motion the changes never start. Content that moves on its own needs a way to pause it (WCAG 2.2.2), and the button is that way for keyboard and touch users, who can't hover.

The tabs are a tab list named "Customer voices"; the selected tab is marked as selected and its panel holds the quote as a blockquote inside a figure with the author as the caption. The underline and the avatar are decorative and hidden. Nothing is announced when the tab changes by itself, so a screen reader isn't interrupted every eight seconds; once the visitor picks a tab, the changes stop and the panel is read as any tab panel is.

With reduced motion there is no animation and so no automatic change: the active tab's underline is full, the pause button is hidden, the text beside it says to pick a tab, and the panels change without their fade. In a right-to-left page the layout mirrors and the underline fills from the end edge.