Generation Benchmark Compare Reviews Block for React

Each review in REVIEWS has a generation and six scores from 1 to 5. A cell's score is the average of that generation's reviews for the criterion, to one decimal; the change is the Gen 2 score minus the Gen 1 score as shown, so the sign always matches the numbers in the row. The closing row averages the six shown scores. The two sentences in the header pick the largest rise and the largest fall from the same numbers.

Press Criterion to sort A to Z and again for Z to A; press Change to sort by the biggest change first, either direction, and again for the smallest first. The header of the sorted column carries aria-sort and an arrow, the others say "none", and a polite line reads the new order. Ties fall back to the criterion's name. Sorting happens on the press, never under the pointer, and the table keeps its height.

A caption, column and row scopes and aria-sort are plain HTML, and a native table keeps them on all of the libraries and ports; the catalog tables of two of them are grids that do not carry a caption. The sort buttons use the catalog button's styles on a plain button.

Both bars run from 0 to 5 over the same width: Gen 1 in a lighter weight of the foreground, Gen 2 in the full weight, and each sits under its own number. The change is an arrow, a sign and a word for a screen reader ("up 1.4", "down 1.1"), never green or red.

The table keeps its four columns and the Gen 1 bar drops, leaving the number; the Gen 2 bar stays beside its number. The criterion names wrap, nothing scrolls sideways at 320 pixels, and the table runs rail to rail.