Checklist FAQ Block for React

Edit TASKS at the top of the file: each entry is an id, the question that titles the row and its answer, one to three sentences. START lists the ids that are already ticked when the page loads; leave it empty to start at zero. The count, the bar and the hint under it are all worked out from those two arrays, so there is nothing else to keep in step.

No. It lives in the page's memory, so a reload goes back to START. That keeps the block free of storage and consent questions and makes it safe to render on the server. To remember it, write the done array to your own account or storage when it changes and read it back in an effect.

No. A ticked task has a filled checkbox with a check mark in it, which assistive technology reads as checked, and its title is crossed out and stays at full contrast, so it reads as done without relying on colour. Each checkbox is named by its task's title and described by its answer.

The count is a status region, so a polite announcement follows every tick and every Reset ("2 of 7 done"). The bar is named "Setup progress" and its value follows the same count. Focus never moves when you tick a task: you stay on the checkbox you pressed.

Tab visits each checkbox in turn, Space ticks or unticks it, and Tab goes on to the Reset button, which clears every task. The checkboxes and the button show a focus ring.

Below the lg breakpoint the title, the progress panel and the tasks stack in that order, with a rule between the panel and the first task. A long question wraps to a second line beside its checkbox, and nothing scrolls sideways at 320 pixels.