Version Scrubber Product Evolution About Block for React

The versions are VERSIONS at the top of the file: each has a name, a changed sentence and a helped sentence. The slider, the buttons and the notes follow the list. The drawing is separate: the Screen component decides which panels are open from the version's index (index >= 2 opens the sidebar, for instance), so edit those thresholds, or the panels, to match your own product.

The slider is a real slider: focus its thumb and use the arrow keys to move one version, Home and End to jump to the first and last, and the screen reader hears the value as, for example, "v3, Folders". The version buttons under it are ordinary buttons that Tab reaches, so you can also jump straight to one.

Yes. The two notes sit in a polite live region: when the version changes, the new heading and both notes are read once, and the invisible copies used to hold the block's height are hidden from assistive technology. The drawing is decorative, so the notes carry all of the information.

Panels open and close with a short width and opacity transition, and the notes fade in when the version changes. With reduced motion the panels simply appear and disappear and the notes change without a fade. Nothing moves on its own.

The header comes first, then the drawing, then the slider and the notes, divided by rules from rail to rail. The slider and the version buttons span the width, and the drawing keeps its layout inside a shorter window. Nothing scrolls sideways at 320 pixels.

Yes. Each target's slider follows its own library's API for the label, the value text and the change handler, so it reads the same everywhere, and the version buttons use that library's own press handler. The drawing and the notes are the same markup everywhere.