Minimal Slider Testimonials Block for React

Edit the TESTIMONIALS array at the top of the file: each entry has an author, role, company, two-letter initials and the quote. The slider's range, its position label and the words read out to screen readers all follow the length of the array, so a sixth quote gets a sixth stop with no other change.

The slider's value is a quote's index. Every quote sits in the same grid cell, so the longest one sets the stage's height and nothing moves when the slider does; the one at the slider's value is visible and the rest are invisible, and a CSS transition on opacity cross-fades between them. Dragging, clicking the track and the keyboard all update the same value.

A Guides with extend="sm" marks="corners" draws the frame, and a second one with marks="top" rules="top" draws the rule above the slider, with + marks where it meets the frame's sides. The slider's range and thumb are overridden to the foreground colour.

Yes. The handle is the one tab stop. The left and right arrow keys move one quote at a time, and so do up and down, and Home and End jump to the first and the last. The quotes that aren't showing are hidden from assistive technology, so only the visible one is read.

The slider is named "Quote" and its value is read in words rather than as a bare number: "Quote 3 of 5, Lucia Ferrante, Design Lead". When a drag or a key press ends, a polite live region says the same thing, so the visitor hears the speaker they landed on instead of every speaker they passed; nothing is announced on load.

The header and stage appear without fading in, and the quotes swap at once instead of cross-fading. The slider still works the same way, and nothing moves on its own.

Yes. The slider runs from the end side to the start side in a right-to-left page, the frame and its marks are symmetric, and each quote sits in a bdi so its quotation marks stay with the sentence.