Feature Flag History Changelog Block for React

Edit FLAGS at the top of the file. A flag has a key, the state before and after (OFF or ON), the share of its audience that has it, the audience's name, the rule as written in your service, who changed it and the day. The headline count and every rollout sentence are computed from the list.

It opens a small popover with the targeting rule in a code block and a line that says how many of every hundred matching users have the flag. Escape closes it and focus goes back to the button. The popover only reads: nothing here changes a real flag.

Each state is a small drawn switch (filled with the thumb at the end for On, a plain outline with the thumb at the start for Off) and the word beside it. Screen readers hear "Changed from Off to On" and the rollout bar is named with the key and the share.

Yes: a native table with a caption, scope on every header and the flag key as the row header. The region around it has a name and takes focus, so the keyboard can scroll it sideways.

Below sm the table scrolls sideways in its own region and the flag column stays in view, so the audience button always sits under its key. In a right-to-left layout the table mirrors and the arrows flip, while keys and rules keep their reading order.

The header and the frame fade up once on load, with CSS transitions. With reduced motion they are off, and the popover opens without its animation.