Medal Count Awards Block for React

Edit MEDALS at the top of the file: one line for each medal won, with the product line (an id from LINES), the medal ("gold", "silver" or "bronze") and the year, a fixed number. The counts, the totals, the ranks, the "Top line" callout and the totals in the header are all counted from that list. Add product lines to LINES; the table gains a row.

By gold medals, then by silver medals, then by the line's name A to Z, the way a medals table is read. Bronze and the total don't decide the order. The rule is written under the table so nobody has to guess, and the Gold head carries aria-sort="descending" so assistive technology knows which column the order follows. To rank by the total instead, change the comparison in BOARD and the sentence under the table, and move the sort state to the Total head.

So that the medals are told apart without colour: gold is a solid disc, silver half filled, bronze an outline, each with its word underneath. The drawing is hidden from assistive technology and the word is the label.

The table is wider than the screen, so it scrolls sideways in a region that takes focus, and the rank and the line column stay in place while the medals move under them. Rows stay one line tall. Nothing else on the page scrolls sideways.

It's a real table with a caption that describes the ranking, column heads, and the rank as the head of each row. The "Top line" callout is plain text, and the figures in it are written out ("4 gold, 2 silver, 1 bronze"). Ranks and counts sit in elements that keep their order in a right-to-left layout.

No. The cup, the product lines and every medal are made up, and Leofric is a made-up service. Swap in your own results and use a real programme's name in text only.