Priority Sorted Changelog Block for React

Edit CHANGES at the top of the file, newest first. A change has a version, a date as an ISO day ("2026-09-27"), a kind, a tier, a title and a sentence. The tiers are constants (CRITICAL, HIGH, MEDIUM, LOW) listed in TIERS, each a word and the classes that draw its glyph; the bands, their counts and the sort all derive from the data. The month bands are listed in MONTH_BANDS: add a month there when a change falls in it, so the two sorts keep the same number of bands and the same height.

Each tier has a drawn glyph that is emptier as the impact falls (a filled square, a half-filled square, a ring, a dot) and always the tier word beside it, so it reads in greyscale, in any theme and to a screen reader, which hears the word and skips the glyph. There are no coloured borders. The change types (Fixed, Improved, Security, Deprecated) are outline badges with an icon and a word.

It is a single-choice group named Sort the changes, with By impact on at first; one item is always on. Tab moves into it and the arrow keys move between the two items. Picking one re-sorts the list at once and a polite line says, for example, "Sorted by date, newest first." The unseen copy that holds the height is hidden from assistive technology and the keyboard.

Both sorts are drawn in one grid cell, the one you aren't looking at invisible and inert, so the cell is as tall as the taller of the two. Both sorts use four bands and the same rows, so they are the same height anyway.

Below md the version and the date sit under each row's sentence, the toggle sits under the title, and nothing scrolls sideways at 320 pixels. In a right-to-left layout the bands, the counts and the glyphs mirror, while the version numbers stay left to right.

The header and the bands fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears. Re-sorting swaps the bands at once, with no animation.