Progress Tracker Changelog Block for React

Edit FEATURES at the top of the file. Each feature has a name, a quarter as its target, the total number of tasks and the list of tasks remaining. The number done is the total minus the remaining ones, and the ring's value, the percentage in its middle and the "7 of 12 tasks" line are all worked out from them, so they cannot disagree. Tick a task off by deleting it from remaining.

The ring and the percentage inside it are decoration, hidden from assistive technology, because the count under the name says the same in text: "7 of 12 tasks", followed, for a screen reader only, by "58 percent done". The ring is drawn in your theme's foreground colour, so it reads in any theme.

It is a disclosure: pressing it opens the list of tasks still to do under the cell and turns its chevron. Each cell opens on its own, and the cell grows to fit while its neighbour in the row keeps its frame. Closed content stays in the page's markup, hidden until the row opens.

Each cell is an article with an h3 for the feature, and the cells are a real list. The Remaining tasks row is a button that says whether it is expanded; Tab moves from row to row and Enter or Space opens one, with a visible focus ring inside the cell's frame.

Below sm the cells stack in one column and the ring stays beside the name and counts, with the text wrapping next to it. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the ring moves to the right of the text, the chevron and frames mirror, and the percentages and quarters keep their form.

The header and the cells fade up once on load, with CSS transitions, and a chevron turns when its row opens. With reduced motion the entrance is off and the chevron changes without turning. The rings are drawn already filled.