Author Grouped Changelog Block for React

Edit PEOPLE and CHANGES at the top of the file. A person has an id, a name and a role; a change has an id, an author (a person's id), a kind and a sentence. Both groupings are derived from those two lists, so the order, the counts and the "N people" lines follow without anything else to edit. The kinds are constants (NEW, IMPROVED, FIXED, SECURITY) listed in KINDS; add one and its cell appears. The header's "Twelve changes from four people" is plain text: update it with the data.

By how many changes they hold, most first, with ties kept in the order of the data. The same rule runs for both groupings, so the busiest author or the biggest kind of change always leads.

It is a single-choice group named Group the changes, with By author on at first; one item is always on. Tab moves into it and the arrow keys move between the two items. Picking one swaps the grid at once and a polite line says, for example, "Grouped by type: 4 kinds of change". The unseen copy that holds the height is hidden from assistive technology and the keyboard.

Each tag is an outline badge with an icon and the word, so it reads in greyscale, in any theme and to a screen reader, which hears the word and skips the icon. By type, the icon sits in a round plate beside the cell's heading, and each change carries its author's name instead of a tag.

The header and the grid fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears. Switching the toggle swaps the cells at once, with no animation.

Below the sm breakpoint the grid is one column, the toggle sits under the title, and a change's tag sits above its sentence. Nothing scrolls sideways at 320 pixels, and in a right-to-left layout the cells and counts mirror while the names stay readable.