Criteria Checklist Awards Block for React

Edit ENTRIES at the top of the file. Each entry has a title, a programme, a year, its first criteria as criteria, and the last as final, which carries the detail shown in the disclosure. A criterion is met: true or met: false. The bar, the sentence and the header's tally are counted from them, so nothing is typed twice.

Every criterion has a drawn mark and a word: a solid disc with a check and "Met", or an outlined disc with a clock and "In review". The marks are hidden from assistive technology and the word carries the meaning.

The last criterion's row is the trigger of a Collapsible, so Enter or Space opens and closes it and the chevron turns. It starts closed, the hidden text is not read while closed, and each cell has its own, so one open doesn't close the other.

The bar is a real progress element and carries the same sentence as the text above it, "4 of 5 criteria met", as its accessible name.

No. The Tundrathwaite Index and the Saffronmore Cup, their criteria and their results are made up for the example, and Gaugeworks is a made-up scanner. Replace them with the awards and checks of your own project.

The two cells stack, 1.5rem apart, with their overshoot lines and + marks intact. Criteria wrap inside the row and the status word stays at the end. Nothing scrolls sideways at 320 pixels.