Total Tally Awards Block for React

Edit ENTRIES at the top of the file. Each entry has a category, a tier ("grand", "winner" or "finalist") and the year of the ceremony, a fixed number. The years, the counts in every cell, the row totals, the column totals and the tally in the header are all counted from that list, so nothing else needs editing: add an entry and every figure follows. The rows run newest first.

TIERS lists the columns in order, each with an id, a label and the weight of its medal ("solid", "half" or "outline"). Add a tier there, add the id to the Tier type and RANK (lower ranks first, for the year's top honour) and give entries that tier. The table gains a column; on a phone, with more than three tiers, let the table scroll sideways in a focusable region instead of narrowing the columns.

The best entry of that year: the highest tier first, then the category A to Z. It's worked out from the same list, so it never disagrees with the counts, and it's hidden on phones to keep the columns wide enough for the figures.

No. Each count rolls up from zero once, the first time it scrolls into view. With reduced motion the final values are shown straight away. Assistive technology reads the real number the whole time, because the rolling digits are hidden from it and the value is written in text.

It's a real table with a caption, column heads and a head for each row, so a screen reader announces the year and the tier for every count. The drawn medals are hidden from assistive technology; the tier's name beside each is the label. Years sit in bdi elements so they keep their order in a right-to-left layout.

No. The Harborwood Awards and every entry in the table are made up, and Dalrymple is a made-up app. If you show a real tally, use the programme's real name in text and only use its own marks if its rules allow it.