Testimonial Rotator
BlockOne large quotation at a time, rotating on a timer shown by a filling indicator, with a stop/start control.
- Sections
- 2 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add testimonial-rotatorimport { DEFAULT } from "@/components/blocks/testimonial-rotator"; export default function Page() { return <DEFAULT />;}<TestimonialRotatorBlock>
| Prop | Type | Default |
|---|---|---|
autoPlayRotates on a timer, with a stop/start control. Never starts by itself under reduced motion. | boolean | true |
defaultIndexInitial testimonial when uncontrolled. | number | 0 |
headingNames the section. Visually hidden unless | ReactNode | "Testimonials" |
headingLevelLevel of the section heading. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
indexControlled index of the testimonial shown. | number | — |
intervalMilliseconds per testimonial while rotating. | number | 5000 |
labelsVisible and accessible text, for localisation. | Partial<TestimonialRotatorLabels> | — |
onIndexChange | (index: number) => void | — |
showHeading | boolean | false |
testimonials | RotatorTestimonial[] | DEFAULT_ROTATOR_TESTIMONIALS |
Plus every attribute of <section> except title.
Follows the APG carousel's rotation rules, which the source (a timer with no way to stop it) did not: a named stop/start button, a pause while the pointer is over the block or focus is inside it, the live region off while rotating and polite otherwise, and no automatic start under reduced motion (WCAG 2.2.2). The section is named by a heading — visually hidden by default — and carries aria-roledescription="carousel"; the quote is a labelled slide. Indicators are named buttons with aria-current and arrow keys (mirrored in RTL), Home and End. The avatar is hidden, since the name is beside it.