Criterion Picker Multi-Criteria Reviews Block for React

By the chosen criterion's score, highest first; a tie goes to the newer review, then to the id. Overall sorts by each review's own star rating. The list shows the top four of the ten, so the reviews that appear change with the criterion. The picker's averages cover all ten, not only the four shown.

Each entry of REVIEWS has its stars, five scores in the order of CRITERIA, and the text. Add a criterion to CRITERIA and a number to every review's scores; the picker, the averages and the dots follow. Keep the reviews' text to about two lines, since the rows reserve that height so the list does not jump when the order changes.

It is a single-choice group of buttons: Tab reaches it, the arrow keys move between choices and Space or Enter picks one. A choice can't be switched off, because the list is always sorted by something. The group takes a value list and a change handler that receives the new list.

Five dots, filled from the start for the score and hollow for the rest, with the number said in text for a screen reader ("4 out of 5"). The chosen criterion's name is bold. Nothing relies on colour.

The picker is a row of pills above the reviews that scrolls sideways, with the chosen one filled. Each review stacks: reviewer, stars, title and text, then the five scores in two columns. Nothing scrolls sideways except the pills.