Rating Breakdown Testimonials Block for React

Edit COUNTS at the top of the file: the number of reviews at five, four, three, two and one star, in that order. The total, the average (to one decimal, by integer maths), the star fill and every row's percentage are derived from it. Then replace REVIEWS with the reviews you want to feature, each with a stars value. Only put real review numbers here.

The breakdown counts every review, but the list below shows a handful of featured ones, so the filter narrows that handful. The status line says "featured reviews" for that reason, and a row with no featured review shows the empty state instead of an empty list. If you render all your reviews, the same rows work as a full filter.

Rounding each row separately can total 99 or 101. The block gives every row its rounded-down share, then hands the leftover points to the rows with the biggest remainders, so the bars and labels always add up to exactly 100.

Each row is a toggle button in the tab order, pressed with Space or Enter, and it is announced with its state, for example "5 stars: 236 reviews, 57%, pressed". The bars and the visible numbers are hidden from assistive technology so nothing is read twice. After every press a polite status line reads out the result, and "Clear filters" returns focus to the first row.

No. An invisible copy of the full list sits in the same grid cell as the visible one, so the space is held and nothing below the block moves. Reviews fade in as they return, and reduced motion turns that off.

Yes. Layout uses logical properties, the divider moves to the other side, the bars fill from the inline start, and each percentage is isolated so it keeps its digits and sign in order.