Accordion Awards Block for React

Edit AWARDS at the top of the file. Each award has a title, a programme, a fixed year, a category, the criteria it was judged on, how many entries the jury read, the prize, a one-sentence citation and a mark (crown, gem, medal, rosette, shield or star). The header's tally is counted from the list, so it always matches the bands. Add the id of a band to defaultValue to open it on load.

Yes. The bands open independently, so a visitor can compare two awards side by side. Pass multiple to the Accordion; remove it for one band at a time.

Each trigger is a button: Enter or Space opens and closes its band, and the focus ring sits inside the band so it is never clipped. Every trigger is its own tab stop: Base UI and React Aria don't move between triggers with the arrow keys.

Yes: closed panels stay in the page, hidden until found, so the browser's find-in-page can open one.

No. Cedarline is a made-up app and Cobaltfield, Dunsterling, Fernhallow, Caldwenny, Ironwhistle and Linnetcroft are made-up programmes, and the citations are written for the example. The marks are drawn by the block, not copied from any award body.

The year moves under the award, the programme sits beside it and each fact in an open band stacks its label above its value, so nothing scrolls sideways at 320 pixels. The drawn mark stays beside the facts at a smaller size. In a right-to-left layout the bands, the plus and the order of the columns mirror, while years and counts keep their digits in order.