Helpful Votes Reviews Block for React

By the votes in REVIEWS: the review with the most helpful votes among those rated 4 or 5 is the favourable pick, and the one with the most among those rated 1 or 2 is the critical pick, ties broken by id. Swap the data and the cells follow. The other reviews fill the rows underneath, so no review appears twice.

It's a real toggle with aria-pressed. Pressing it adds one to the helpful count and one to the number of readers who voted, so "64 of 71" becomes "65 of 72"; pressing it again takes both back. A polite status line says "You marked this review helpful" or "Vote taken back". Nothing is sent and a reload starts afresh: to keep votes, post the review's id from the handler and seed helpful and asked from your data.

Order is read from the votes the page loaded with, and only the sort group re-orders. A row that jumped to the top under your pointer the moment you voted would be hard to follow, so your own vote moves the count and nothing else. The line beside the group says which order the rows are in and is read out when it changes.

They're the catalog Rating, read-only, inside an inert, aria-hidden wrapper: they only draw the value, and the words next to them say it ("4 out of 5"). Rating draws in your warning colour by default; here it takes text-foreground, so the stars and the pressed controls stay in your theme's text colour.

Yes. The cells and rows lay out with logical classes, so the reviewer sits at the start of each row; the counts, the "64 of 71" sentence and the dates are each wrapped so their digits stay in order, and the stars mirror.