Stars: Make reviews accessible

[jarstelfox]

QA

• Ensure you screen reader now reads the rating

Connects: https://github.com/iFixit/ifixit/issues/51161

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-commerce	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 15, 2023 11:00pm
react-commerce-prod	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 15, 2023 11:00pm

[ghost]

👇 Click on the image for a new way to code review

Legend

[github-actions]

📦 Next.js Bundle Analysis for @ifixit/commerce-frontend

This analysis was generated by the Next.js Bundle Analysis action. 🤖

This PR introduced no changes to the JavaScript bundle! 🙌

[ianrohde]

CR 💯

[erinemay]

Productlist:

@jarstelfox, I noticed on main that the number of reviews on a productlist page is read. On this branch it isn't. When I scroll through the elements on this branch, I get the appropriate "Rated ${product.reviews.rating} out of 5 stars" read aloud to me, but it skips to the price instead of reading aloud the number of reviews.

That number already wasn't clear on main because it was just a number read out, but now (on this branch) it's not read at all.

Product Page

Works. Tabbing through, I get the price, "Rated ${product.reviews.rating} out of 5 stars", and then "# reviews"

[jarstelfox]

Fixed

[erinemay]

Fixed

Yep. QA 🍰 It's now reading me: "Rated ${product.rating} out of 5 stars with ${product.rating_count} reviews" on productlist pages.

Using a screen reader to interact with the star count on productlist and product pages is now much nicer. The screen reader reads the product rating and the review count clearly on both page types.

[ianrohde]

CR ⚪