Platform Specific Changelog Block for React

Edit PLATFORMS at the top of the file. A platform has an id, a name and its entries, newest first. An entry has a version, an ISO date, a kind, one text sentence and shared, true for the one that applies to every platform. EVERYWHERE is that entry, and it is placed first in each list. The count on each tab is the length of its list, so it stays true when you edit.

They are the catalog's Tabs: arrow keys move between the tabs, Home and End go to the first and last, and the chosen tab's panel is the only one the reader can reach. A visually hidden polite line says which platform is showing and how many entries it has. Each tab's name includes its count ("Web 4 entries"), so the number is spoken with it.

Platforms have different numbers of entries, so every list is also laid out unseen in the same grid cell, and the tallest sets the cell's height. The unseen copies are hidden from assistive technology and the keyboard.

Each type is an outline badge with an icon and the word: sparkles for New, a rising line for Improved, a wrench for Fixed and an archive box for Deprecated. The icons are decoration, so a screen reader hears the word.

Below lg the tab band scrolls sideways inside its own box, so the tabs keep a readable width, and each row puts the version and day on one line above the sentence. Nothing else on the page moves sideways at 320 pixels.

The header and the band fade up once on load, with CSS transitions. With reduced motion they are off and the block simply appears. Changing tab swaps the rows at once.