Jury Statement Awards Block for React

Edit CATEGORIES at the top of the file. Each has an id, a label for the card, a title (what it won, in a few words), the jury's statement, and its jurors as initials and names. Add or remove a category and the radio group, the hidden copies that hold the height and the statement follow. Four categories read best; with more, the chip row scrolls further on a phone.

It's a real radio group: Tab enters it, the arrow keys move and choose in one step, and Tab leaves. Choosing changes the statement at once and nothing else on the page moves.

Every statement is rendered in the same grid cell: the open one is visible and the others sit unseen under it, hidden from assistive technology and inert, so the cell is always as tall as the longest statement. Choosing only swaps which one shows, with a short fade that reduced motion removes.

The group is named "Category"; each radio reads its label and its short title. The statement sits in a polite live region, so the new quote and its jurors are read after a choice, in a figure with the quote and a caption naming the jurors. The avatars are decorative and hidden.

No. The programme, the jurors and every statement are made up for the example, and Verdictly is a made-up tool. Quote real juries only with their words and permission, and name the programme in text.

The categories become one row of chips, each a radio card, that scrolls sideways with the next chip peeking so it's clear there are more; the statement follows under a rule. The header and the chips fade up once on load. Nothing else scrolls sideways at 320 pixels.