Rotating Carousel Banner Block for React

Anything that moves by itself for more than five seconds has to be pausable (WCAG 2.2.2), so the Pause button is the first control in the card, before the moving content, and it flips to Play. Rotation also holds while the pointer is over the card and while keyboard focus is inside it, so a slide is never taken away mid-read. A click that focuses a dot does not hold it: only keyboard focus does. With reduced motion turned on it starts paused, and Play starts it.

Edit ROTATION_MS for the pause between slides (5000 to 8000 reads well), and SLIDES for the content: each entry is a badge, a title, a link and an href. The dots, their labels ("Show update 2 of 3") and the rotation follow the list, and choosing a dot restarts the wait for that slide.

No: while it rotates, the slides are not announced, because a message that changes every six seconds would talk over everything else. Once it is paused, the region is polite, so choosing a dot reads the slide you chose. Slides that are not showing are inert and hidden from assistive technology, and their links cannot take focus.

All slides share one grid cell, and the cell is as tall as the tallest, so a longer headline on one slide never moves the page. Keep headlines to about the same length, and write them so the card stays under about 330 pixels.

The card fades up once on load, the slides cross-fade in 500 ms and the active dot stretches, all with CSS transitions. With reduced motion turned on the transitions are off, nothing rotates until Play is pressed, and a slide change is instant.

The card spans the column and the headline wraps; the dots keep a 24 pixel hit area each. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the Pause button moves to the other corner and the arrow mirrors.