Before After Awards Block for React

Edit AWARDS at the top of the file. Each award has a name, programme, fixed year, a shape for its mark and two metrics; a metric is a label, the before and after figures, a unit and whether it is a rate. Bars are drawn against the larger of each metric's two figures, so the longer bar always fills its track.

Only the emphasis. Both figures are always in the text for assistive technology ("Before 94 min, after 31 min, down 67%, from 94 min"), so nothing is hidden by the choice. Sighted readers see the large digits roll to the chosen year and its bar turn solid; a polite status line says which year is showing. Nothing is saved or sent.

From the two figures. A rate (a share in per cent) is compared in points, so 48% to 71% reads "up 23 points"; anything else is compared in per cent of the figure before. The direction is a word and an arrow, never a colour, and the outline bar is told apart from the solid one by fill, not hue.

The digits roll with Sliding Number and the bars change fill with a short CSS transition. Under reduced motion the bars change at once. The block's height never changes when you toggle, because both bars and the figure are always there.

The three cells stack in one column, each with its two results one under the other, and the control spans the width. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the digits and bars keep their left-to-right order, as numbers do.

No. Mendwell and the Valeley programmes are made up, and so are the figures. Replace them with your own awards and results, and say in your copy how the year before and the year of each award were measured.