From ed0a4402740d08edd932777b929aa5729bdcfab3 Mon Sep 17 00:00:00 2001
From: Raluca Stan <ralucastn@gmail.com>
Date: Wed, 20 Jan 2021 13:45:25 +0100
Subject: [PATCH] add missing aria-label for stars image in review-list-item
 component (https://github.com/woocommerce/woocommerce-blocks/pull/3706)

---
 .../reviews/review-list-item/index.js           | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.js b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.js
index a1fa5dc021c..73a3770a4c4 100644
--- a/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.js
+++ b/plugins/woocommerce-blocks/assets/js/base/components/reviews/review-list-item/index.js
@@ -124,22 +124,19 @@ function getReviewRating( review ) {
 	const starStyle = {
 		width: ( rating / 5 ) * 100 + '%' /* stylelint-disable-line */,
 	};
+	const ratingText = sprintf(
+		/* Translators: %f is referring to the average rating value */
+		__( 'Rated %f out of 5', 'woo-gutenberg-products-block' ),
+		rating
+	);
 	return (
 		<div className="wc-block-review-list-item__rating wc-block-components-review-list-item__rating">
 			<div
 				className="wc-block-review-list-item__rating__stars wc-block-components-review-list-item__rating__stars"
 				role="img"
+				aria-label={ ratingText }
 			>
-				<span style={ starStyle }>
-					{ sprintf(
-						/* Translators: %f to the average rating for the review. */
-						__(
-							'Rated %f out of 5',
-							'woo-gutenberg-products-block'
-						),
-						rating
-					) }
-				</span>
+				<span style={ starStyle }>{ ratingText }</span>
 			</div>
 		</div>
 	);