Spotlight Dialog Awards Block for React

Edit AWARDS at the top of the file. Each has a title, programme, category, a fixed year, the number of entries judged, the prize, a why sentence or two and a mark, one of the six drawings above it (a drawing is a few paths in a 64 by 64 box). The tally in the header is counted from the list. For a different number of tiles, make it a multiple of three so no cell of the grid is left empty.

The arrow keys step through the awards (mirrored in a right-to-left page), Home and End jump to the first and last, Escape closes, and Tab stays inside the dialog. The block listens on the document in the capture phase so the keys also work while focus is on a button inside the dialog.

To the tile of the award shown last: step to the fifth award, press Escape, and the fifth tile has focus. Each tile has its own id built with useId. finalFocus on the dialog content returns the tile.

Two tiles across, three rows. The dialog fills the screen with a bar for the counter and the close button, the drawing and the details scrolling in the middle, and Previous and Next side by side at the foot. On a wide screen it's a centred card with the drawing beside the details.

No. Ivorydale is a made-up streaming service and Quartzworth, Wickerdale, Norwenna, Coppermere, Emberholt and Foxgrove are made-up programmes; the figures and prizes are written for the example. The trophies are drawn by the block.

The tiles are a list named for Ivorydale's awards, each a button inside a heading, so a screen reader's heading list shows every award. The dialog is named by the award's title, described by the programme and year, and a polite line announces the award and its place each time it changes. The drawings are hidden from assistive technology.