Third-Party Integrations Changelog Block for React

Edit API_VERSIONS (the versions a customer may run), LATEST and CONNECTORS at the top of the file. A connector has a mark, a name, latest (its fit on the latest API) and mine, a list with its fit on each API version in the same order as API_VERSIONS. A fit is Works, Needs update or Retired. The count in the status line is worked out from the rows for the version picked, so it stays true when you edit. The deadline is a typed ISO date, not computed from today.

The three buttons are a single-choice toggle group that always keeps one pressed, so the table never has no version. Pressing one redraws the first column and the status line, which is a polite live region, so a screen reader hears the new count. The arrow keys move between the buttons, and every row, badge and heading keeps its place, because only the words inside the cells change.

Each cell is an outline badge with an icon and the word: a tick for Works, circular arrows for Needs update and a barred circle for Retired. The icons are decoration, so a screen reader hears the word. The one amber dot in the status line is a hint only; the count beside it carries the meaning.

The plate is a plain tile with two typed letters, marked as decoration, and the service is named in text beside it. Replace its contents with a logo you have the right to use if you want one. The block draws no brand's mark and uses no brand colours.

Below md the table scrolls sideways inside a region that has a name and a focus ring, so a keyboard can scroll it. The connector column is pinned at the start with a hairline at its end, so every row keeps its name 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. Changing the version changes the words at once.