Release Blockers Changelog Block for React

Edit BLOCKERS at the top of the file. A blocker is an id, a title, an owner with initials, an opened day as an ISO date ("2026-07-06") and a cleared flag; add critical to the one that stops the release outright. The headline's count, the "4 of 6 cleared" line, the bar and the filter counts are all computed from the list, and the day on screen ("Jul 6, 2026") 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.

A status colour should mean a real alert, so only the open critical blocker gets one, with the word "Critical" beside it. Every other state is a shape and a word in the foreground colour: a ring and "Open", a filled square and "Cleared". Colour is never the only signal, and in a greyscale or high-contrast theme nothing is lost.

The toggle group chooses one view and the table shows only those rows. Pressing the chosen item again does nothing, so the table is never empty. The table's height follows the filter, since two rows are shorter than six. A polite status line announces how many rows are showing.

Yes: a native table with a caption, column headers with scope, and the blocker's title as the row header. The caption is visually hidden because the heading above already introduces the list. The states are words as well as shapes, so a screen reader hears "Open" or "Cleared" for each row.

Below sm the Owner and Opened columns are dropped and the id sits above the title, so each row keeps its title and state without scrolling sideways at 320 pixels. The toggles wrap onto a second line if they must. In a right-to-left layout the table mirrors, while ids, dates and counts stay in reading order.

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 filter swaps the rows at once.