Onboarding Checklist Team Block for React

Edit GROUPS at the top of the file: each group has an id, a name and its tasks (an id, a label and a due such as "Day 2" or "Week 1"). START lists the ids ticked on load. The totals, the ring, each group's count and the Next up band are counted from that data; Next up is the first unticked task in reading order. Every task's id must be unique across groups.

The ring is a drawing and is hidden from assistive technology; the sentence beside it ("8 of 14 tasks done") is a status region and is what is read when a task changes. The Next up band is a polite live region too, so ticking the task it names announces the next one. The ring's colour is a foreground weight, not the primary colour.

No. Ticks live in the page's memory only, and the header says so. A reload starts again from the eight tasks ticked on load. To keep progress, store the ticked ids in your own app and pass them in as START.

Each group heading is a button inside an h3: it says whether the group is expanded, and Enter or Space folds it. Folding hides only its tasks; its count stays. Ticks survive folding. A folded group's tasks stay in the markup, hidden, so they can't be tabbed to or read.

The ring and its count sit under the title. Next up becomes a stacked band that keeps room for a two-line task, so ticking never moves what is below. The three groups become full-width bands under rules with + marks, and a task's due tag sits under its label. Nothing scrolls sideways at 320 pixels.

The header and Next up band fade up once on load, the ring eases to its new value when a task is ticked, and a group eases open and closed. With reduced motion all three happen at once.