Connector Map Awards Block for React

Edit PAIRS at the top of the file: each pair has an award name, its programme and fixed year, the outcome it is joined to, the before and after figures and the unit. Awards stay in the order you give them and the results are sorted by the size of their change, so the curves are worked out for you. If you add a pair, add its row classes to AWARD_ROWS and OUTCOME_ROWS and raise the number of rows the map reserves.

One SVG with preserveAspectRatio="none" sits behind the middle column. Each curve starts at the middle of an award's row and ends at the middle of its result's row, as a cubic Bézier computed from the row height and gap, so it follows the layout. The strokes keep their width at any size, and in a right-to-left layout the drawing is mirrored so the curves still start at the awards.

The awards are a native radio group named "Choose an award to follow it to its result". Tab moves into the group, and the arrow keys move through it and choose as they go; the focus ring shows on the award's cell. Choosing changes only the drawing and the status line: nothing is submitted or saved.

The curves need two columns, so below lg they are hidden and each pair becomes a short stack: the award, then its result, with the result labelled for screen readers. The radio group still works, and the chosen pair is ringed. Nothing scrolls sideways at 320 pixels.

Each award is a radio named by its heading and described by its result, so a screen reader hears the award and then its result. The drawing is hidden from assistive technology, and the status line is a polite live region that speaks the chosen pair.

No. Brannoc and the Jasperdale programmes are made up, and so are the figures. Replace them with your own awards and results, measured the same way for the year before and the year of each award.