Merge pull request #2157 from iFixit/stars-aria-iy-up

Stars: Make reviews accessible
iFixit · Dec 15, 2023 · c3516da · c3516da · vercel · Dec 15, 2023
2 parents 5ece16d + d17e97b
commit c3516da
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/frontend/templates/product-list/sections/FilterableProductsSection/ProductList.tsx b/frontend/templates/product-list/sections/FilterableProductsSection/ProductList.tsx
@@ -145,8 +145,14 @@ export function ProductListItem({ product }: ProductListItemProps) {
                      </Flex>
                      {(product.rating >= 4 || product.rating_count > 10) && (
                         <HStack align="center" data-testid="reviewStars">
-                           <Rating value={product.rating} />
-                           <Text fontSize="sm">{product.rating_count}</Text>
+                           <Rating
+                              value={product.rating}
+                              aria-label={`Rated ${product.rating} out of 5 stars with ${product.rating_count} reviews`}
+                              role="img"
+                           />
+                           <Text fontSize="sm" aria-hidden={true}>
+                              {product.rating_count}
+                           </Text>
                         </HStack>
                      )}
                      {showBadges && (

diff --git a/frontend/templates/product/sections/ProductOverviewSection/ProductRating.tsx b/frontend/templates/product/sections/ProductOverviewSection/ProductRating.tsx
@@ -14,8 +14,14 @@ export function ProductRating({ product }: ProductRatingProps) {
 
    return (
       <HStack mt="5" alignItems="unset">
-         <Rating value={product.reviews.rating} />
-         <Text color="gray.600">{product.reviews.rating}</Text>
+         <Rating
+            value={product.reviews.rating}
+            aria-label={`Rated ${product.reviews.rating} out of 5 stars`}
+            role="img"
+         />
+         <Text color="gray.600" aria-hidden={true}>
+            {product.reviews.rating}
+         </Text>
          <Box w="1px" bg="gray.300"></Box>
 
          <Link href="#reviews" color="gray.600">

diff --git a/frontend/templates/product/sections/ProductReviewsSection/index.tsx b/frontend/templates/product/sections/ProductReviewsSection/index.tsx
@@ -275,7 +275,11 @@ function ProductReviewLineItem({ review }: ProductReviewLineItemProps) {
             </HStack>
          )}
          <HStack my="4">
-            <Rating value={review.rating} />
+            <Rating
+               value={review.rating}
+               aria-label={`Rated ${review.rating} out of 5 stars`}
+               role="img"
+            />
             {review.created_date && (
                <Text mt="4" color="gray.500">
                   {formatReviewDate(review.created_date)}

diff --git a/frontend/tests/jest/tests/__snapshots__/ProductListItem.test.tsx.snap b/frontend/tests/jest/tests/__snapshots__/ProductListItem.test.tsx.snap
@@ -55,7 +55,9 @@ exports[`ProductListItem renders and matches the snapshot 1`] = `
               data-testid="reviewStars"
             >
               <div
+                aria-label="Rated 4.5 out of 5 stars with 18 reviews"
                 class="chakra-stack css-fqllj7"
+                role="img"
               >
                 <svg
                   aria-hidden="true"
@@ -144,6 +146,7 @@ exports[`ProductListItem renders and matches the snapshot 1`] = `
                 </svg>
               </div>
               <p
+                aria-hidden="true"
                 class="chakra-text css-itvw0n"
               >
                 18