Recent Activity Reviews Block for React

From BASE (how many ratings came before these ten, and the stars they add up to) plus the ratings so far: the stars total times 100, divided by the count and rounded, so 4.31 is the whole number 431 until it's shown. The row's "before" is the average after the previous rating, so each row's "after" is the next row's "before", and the change is their difference. Edit BASE and RATINGS to use your own.

The step line is one SVG path (each value held until the next rating) over HTML gridlines and rings placed with percentages, so it stretches to any width. The drawing is hidden from screen readers because the stream beside it lists every value in text, and a status line below announces the selected rating's effect ("Mina Takeda's 4-star rating moved the average from 4.28 to 4.30."). The axis shows the lowest and highest average with two hundredths of room, so small moves are visible.

Each row is a native button with aria-pressed, so Tab moves between them and Enter or Space selects one. The selected row gets a ring and a tint, and the chart's dot moves with a short transition that stops under reduced motion.

Because the average was above four. A rating moves the average up only when it is above the average at that moment: a five raises it, a four below an average of 4.31 lowers it a little, and a one lowers it most. The signed change beside each row uses a plus or a true minus sign, never colour, so it reads the same to everyone.

They're typed, fixed ISO dates shown without a year, each in a time element; nothing reads the visitor's clock. Ratings made on the same day appear in the order typed.

Yes for the stream: rows, stars and the arrow between the two averages follow the page's direction (the arrow mirrors), and figures are isolated so their digits keep their order. The chart is a time series, so it always runs from earlier to later in the same direction, whatever the page's direction.