Progress Bar List Stats Block for React

Edit MILESTONES: a label, an owner, a due week, the current count, the target and the unit you count in (plural, as it reads after "of 140"). The percentage, the done flag, the headline count and each bar's accessible name come from those numbers. A milestone is done when the count reaches the target.

By its words and its weight, not by colour: the row says "Done" next to a check and "100%", and the bar is the solid foreground where the unfinished bars are a lighter mix of it. The headline counts the finished rows, so it always agrees with the list.

Each bar is named with its row's facts ("Docs pages rewritten: 118 of 140 pages, 84%"), so a screen reader that lands on the bar hears the milestone, not just a number. The bar takes an aria-label.

Yes. The rows are a description list: the milestone is the term and its owner, count and percentage are the descriptions, all as text. Counts sit in bdi elements so right-to-left pages keep "118 of 140" together. The bars add the picture and nothing the text doesn't say.

Each row stacks: the milestone and its owner on top, then the count, the percentage and the bar. The frame runs between the rails and nothing scrolls sideways at 320 pixels.