Checklist Style Changelog Block for React

Edit FEATURES at the top of the file, newest first. Each feature has an id, a title, a one-line detail, a version, a date as an ISO day and startsTried, whether its box starts ticked. Set every startsTried to false for a clean list. The total, the count and the meter come from the list, so they follow your edits.

No. They are state in the page: reload and they reset. That is on purpose, since the block has no account to save them to. To keep them, store the tried ids in local storage or send them to your server from toggle.

The count ("2 of 6 tried") sits in a polite status, so each tick is announced. The meter under the header is decoration and hidden from assistive technology, because the sentence already says the same thing. Every checkbox is named by its feature's title and described by its line.

Anywhere on its row: the whole row is the checkbox's label. The box turns foreground-coloured rather than primary when ticked, so the page's one primary colour stays with its main action. Keyboard: Tab to a box and press Space.

Below sm each row is a box and the text, with the version, the day and the "Tried" mark under the text. From sm they sit in a column at the row's end. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the box moves to the start edge and the version and counts keep their reading order.

The header and the list fade up once on load, and the meter's fill grows as you tick. With reduced motion the fade and the growth are off. The mark in a ticked row appears at once either way.