Month Picker Awards Block for React

Edit WINNERS at the top of the file: one entry per awarded month, in month order, with the name, role, team, citation, three facts and the number of nominators. The month cells, the profile and the tally in the header are all built from that list. To open on a different month, change which entry LATEST points to.

Every month after the last entry in WINNERS is drawn as a quiet cell with a dashed circle, disabled, and read aloud as "not yet awarded". Add an entry to WINNERS and that month becomes a normal cell. The months are named without a year, so the block never goes out of date by itself.

Yes. The strip is one tab stop; the arrow keys move between the months that have a winner and choose as they go, skipping the disabled ones. A polite line, hidden from sight, says which month and winner are showing. The profiles that are not showing are hidden from assistive technology and cannot be focused.

The twelve cells become a single row that scrolls sideways, with the next cell peeking, and the profile moves under it. The strip scrolls itself once on load so the chosen month is in view. The block's height is the same whichever month is chosen.

No. The Vesperwell Prize, Primrose and every person are invented, and the initials stand in for photographs. Nothing is sent anywhere: the choice only changes what the page shows.

Yes. The radios are native inputs, so the behaviour is the same on React, Vue, Svelte and Solid with any base library, and the layout needs no per-library classes.