Summary Header Reviews Block for React Aria

Edit TALLY (how many reviews gave each star rating) and RECOMMENDED (how many would buy it again) at the top of the file. The total, the average to one decimal (by whole-number maths), the stars drawn to the nearest half, the recommend share and each row's percentage by the largest remainder method, so the five rows always add up to 100, are all worked out from them.

No. The form is local state: it checks the rating and the text, then shows a thanks that says "Your review shows here only; this page does not send anything." Close the dialog and open it again and the form starts empty. To keep reviews, post rating and review to your own endpoint from the submit handler and show the thanks when it answers.

When the dialog opens it follows your library's own rule. On a failed submit, focus moves to the first field with a problem: the first star when the rating is missing, the text box when the review is too short. After a good submit it moves to the thanks, and closing the dialog returns focus to Write a review.

Write a review is the dialog's trigger and the section's one primary control. The Shine Button sits inside DialogTrigger beside the dialog.

They're the catalog Rating, read-only, inside an inert, aria-hidden wrapper: they only draw the average, and the figure beside them says it. The form's rating is the same component, not read-only, and each star is named ("3 of 5, Good").

The three cells stack with a hairline between them, the header's button sits under the sentence, and the dialog fits the screen. Nothing scrolls sideways at 320 pixels.