Detailed Reviews Testimonials Block for React

No. The block keeps each visitor's vote in local state, so the counts change on screen and reset when the page reloads, and nothing is sent anywhere. To save votes, call your endpoint from the vote function and seed helpful and notHelpful from the stored totals. The counts shown are always the typed starting number plus the visitor's own vote, so they never go below it. Each review allows one choice at a time: choosing the other button moves the vote and pressing the chosen one again withdraws it, so a count only ever rises by one.

Edit the REVIEWS array at the top of the file. Each review has a name, role, company, initials, a relative date such as "3 weeks ago", a rating from 1 to 5, its starting vote counts and an array of paragraphs. The quotation marks are added around the first and last paragraph for you. The rail's average, total and bars come from the SPREAD array (how many reviews gave each star level), so change those counts and everything follows.

The rail shows the average and the button without the bars, the first two reviews show, and a ghost button, "Show all 3 reviews", reveals the rest. It reports aria-expanded and names the list it controls, and on desktop all three reviews always show.

Each pair of votes is a fieldset named after the reviewer ("Was James Holloway's review helpful?"), holding two toggle buttons that announce whether they are pressed; Tab moves between them and Space or Enter presses one. The confirmation is a polite live region that is always on the page, so it is read out when a vote changes. The stars are decorative; the review says "Rated 5 out of 5" in text instead, and each bar's figures are read as "5 stars, 182 reviews".

It's a link to href="#": point it at your full reviews page. It's a ShineButton with render set to an a element and nativeButton={false}.

Yes. The rail, the cells and the vote row use logical sides, and each paragraph and each count sits in a bdi, so the quotation marks and the digits stay in order.