Rollback History Changelog Block for React

Edit ROLLBACKS at the top of the file, newest first. A rollback is an id, a date as an ISO day ("2026-09-09"), the from and to versions, a reason, the minutes the revert took and an ended phrase. The summary above the table ("5 rollbacks in 90 days, median 6 min") counts the rows and takes the median of their minutes, so it stays true when you edit. The day on screen is spelled out from the ISO day by a small helper, so it reads the same on the server and in every browser. Dates are fixed, never computed from today.

Time to revert is a button inside its column header. The first press orders the rows fastest first, the second slowest first and the third returns them to newest first, so the table can always go back to its natural order. The header carries aria-sort ("ascending", "descending" or "none"), the arrow beside the label shows the direction, and a visually hidden polite line says what the table is now sorted by.

Each reason is an outline badge with an icon and the word: a database for a bad migration, a memory stick for a leak, sliders for a config change. A screen reader hears the word and skips the icon. The three reasons are constants at the top of the file, each an icon, an id and a label.

A version pair like "v3.9.0 to v3.8.2" has to read in the same order everywhere, so it is set in a monospaced run with an arrow between, and a visually hidden "back to" for screen readers. In a right-to-left layout the rest of the table mirrors while the pair stays in order.

Below md the Reason column is dropped, and the table scrolls sideways inside a region that has a name and a focus ring, so a keyboard can scroll it. The day column stays pinned at the start with a hairline at its end, so every row keeps its date while you scroll. Nothing else on the page moves sideways at 320 pixels.

The header and the table fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears. Sorting re-orders the rows at once.