Sheet Detail 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 summary, three criteria for the ordered list and a mark: a scalloped seal made with sealOf(lobes, glyph), so changing a seal means changing two numbers and a path. The tally in the header is counted from the list.

To the name button of the award that was shown last: step to the fourth award with Next, press Escape, and the fourth row has focus. Each row's button has its own id, built with useId, so two copies of the block on a page never collide. finalFocus on the sheet content returns the row.

From the end edge of the page on a screen 640 pixels wide or more: the right in a left-to-right page and the left in a right-to-left one, chosen from the page's direction when a row is pressed. On a narrower screen it comes up from the bottom and fills most of the height, scrolling inside if the detail is long.

Yes: a native table with a caption, column headers and the award's name as each row's header, on every target (the catalog's React Aria table is a grid, which has no captions). On a phone the Programme and Category columns are hidden and the programme repeats under the name, so nothing scrolls sideways.

No. Ambrose is a made-up workspace and Ridgecombe, Thrushcombe, Zinnowick, Mistlebank, Verdantwick and Tilleywick are made-up programmes; the entries, prizes and criteria are written for the example. The seals are drawn by the block.

Tab to a name and press Enter or Space to open the sheet; focus moves inside it and stays there until it closes. Previous and Next are buttons at its foot, Escape or the close button closes it, and the link to the programme is reachable between them.