From 7c63cd9faad27a2d0ae6d16783e4c542a3e9b70a Mon Sep 17 00:00:00 2001
From: Tymur Biedukhin <tymur.biedukhin@bigcommerce.com>
Date: Thu, 18 Mar 2021 13:40:59 +0200
Subject: [PATCH] fix(storefront): BCTHEME-424 Alt text should include product
 name for ratings

---
 CHANGELOG.md                                     |  1 +
 lang/en.json                                     |  2 +-
 templates/components/amp/products/card.html      |  2 +-
 templates/components/amp/products/list-item.html |  2 +-
 templates/components/amp/products/ratings.html   |  6 +++++-
 templates/components/products/card.html          | 10 +++++-----
 templates/components/products/list-item.html     |  8 ++++----
 templates/components/products/ratings.html       |  6 +++++-
 8 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c6a1e7b6bc..08b37db4d4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Alt text should include product name for ratings. [#2015](https://github.com/bigcommerce/cornerstone/pull/2015)
 - Fixed insufficient button label on cart page from action controls. [#2013](https://github.com/bigcommerce/cornerstone/pull/2013)
 - "Skip to main content" now is visible when top banned is absent. [#2010](https://github.com/bigcommerce/cornerstone/pull/2010)
 - Announce subscribing email field as mandatory. [#2011](https://github.com/bigcommerce/cornerstone/pull/2011)
diff --git a/lang/en.json b/lang/en.json
index fd0bda3921..c3869a4a9f 100755
--- a/lang/en.json
+++ b/lang/en.json
@@ -713,7 +713,7 @@
             "rating_label": "Rating",
             "select_rating": "Select Rating",
             "anonymous_poster": "Unknown",
-            "rating_aria_label": "Product rating is {current_rating} of {max_rating}",
+            "rating_aria_label": "{rating_target} rating is {current_rating} of {max_rating}",
             "rating": {
                 "1": "1 star (worst)",
                 "2": "2 stars",
diff --git a/templates/components/amp/products/card.html b/templates/components/amp/products/card.html
index b53b594292..b85c852dcf 100644
--- a/templates/components/amp/products/card.html
+++ b/templates/components/amp/products/card.html
@@ -15,7 +15,7 @@
         {{#and rating show_rating}}
             <p class="card-text" data-test-info-type="productRating">
                 <span class="rating--small">
-                    {{> components/amp/products/ratings rating=rating}}
+                    {{> components/amp/products/ratings rating_target=name rating=rating}}
                 </span>
             </p>
         {{/and}}
diff --git a/templates/components/amp/products/list-item.html b/templates/components/amp/products/list-item.html
index 044bdd2873..cfd3bdcc62 100644
--- a/templates/components/amp/products/list-item.html
+++ b/templates/components/amp/products/list-item.html
@@ -6,7 +6,7 @@
         <div class="listItem-content">
             <div class="listItem-details">
                 {{#if show_rating}}
-                    <p class="listItem-rating">{{> components/amp/products/ratings rating=rating}}</p>
+                    <p class="listItem-rating">{{> components/amp/products/ratings rating_target=name rating=rating}}</p>
                 {{/if}}
                 {{#if brand.name}}
                 <p class="listItem-brand">{{brand.name}}</p>
diff --git a/templates/components/amp/products/ratings.html b/templates/components/amp/products/ratings.html
index 443cd16d74..7478247537 100644
--- a/templates/components/amp/products/ratings.html
+++ b/templates/components/amp/products/ratings.html
@@ -1,5 +1,9 @@
 <span role="img"
-      aria-label="{{lang 'products.reviews.rating_aria_label' current_rating=rating max_rating=5}}"
+    {{#if rating_target}}
+      aria-label="{{lang 'products.reviews.rating_aria_label' rating_target=rating_target current_rating=rating max_rating=5}}"
+    {{else}}
+      aria-label="{{lang 'products.reviews.rating_aria_label' rating_target='Product' current_rating=rating max_rating=5}}"
+    {{/if}}
 >
     {{#for 1 5}}
         {{#if ../this.rating '>=' $index}}
diff --git a/templates/components/products/card.html b/templates/components/products/card.html
index efc90733a0..8f1478578b 100644
--- a/templates/components/products/card.html
+++ b/templates/components/products/card.html
@@ -25,21 +25,21 @@
     {{/if}}>
     <figure class="card-figure">
         {{#if stock_level '===' 0}}
-            {{> components/products/product-badge 
+            {{> components/products/product-badge
                 badge-type='sold-out'
                 badge_view=theme_settings.product_sold_out_badges
                 badge_label=theme_settings.pdp_sold_out_label
             }}
         {{else}}
             {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
-                {{> components/products/product-badge 
+                {{> components/products/product-badge
                     badge-type='sale'
                     badge_view=theme_settings.product_sale_badges
                     badge_label=theme_settings.pdp_sale_badge_label
                 }}
             {{/or}}
         {{/if}}
-        <a href="{{url}}" 
+        <a href="{{url}}"
            class="card-figure__link"
            aria-label="{{name}},{{> components/products/product-aria-label}}"
            {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}
@@ -95,7 +95,7 @@
         {{#and rating show_rating}}
             <p class="card-text" data-test-info-type="productRating">
                 <span class="rating--small">
-                    {{> components/products/ratings rating=rating}}
+                    {{> components/products/ratings rating_target=name rating=rating}}
                 </span>
             </p>
         {{/and}}
@@ -104,7 +104,7 @@
         {{/if}}
         <h3 class="card-title">
             <a aria-label="{{name}},{{> components/products/product-aria-label}}"
-               href="{{url}}" 
+               href="{{url}}"
                {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>{{name}}</a>
         </h3>
 
diff --git a/templates/components/products/list-item.html b/templates/components/products/list-item.html
index ab1f0801ec..cff94e61ec 100644
--- a/templates/components/products/list-item.html
+++ b/templates/components/products/list-item.html
@@ -12,14 +12,14 @@
            {{/if}}
         >
         {{#if stock_level '===' 0}}
-            {{> components/products/product-badge 
+            {{> components/products/product-badge
                 badge-type='sold-out'
                 badge_view=theme_settings.product_sold_out_badges
                 badge_label=theme_settings.pdp_sold_out_label
             }}
         {{else}}
             {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
-                {{> components/products/product-badge 
+                {{> components/products/product-badge
                     badge-type='sale'
                     badge_view=theme_settings.product_sale_badges
                     badge_label=theme_settings.pdp_sale_badge_label
@@ -46,13 +46,13 @@
         <div class="listItem-content">
             <div class="listItem-details">
                 {{#if show_rating}}
-                    <p class="listItem-rating">{{> components/products/ratings rating=rating}}</p>
+                    <p class="listItem-rating">{{> components/products/ratings rating_target=name rating=rating}}</p>
                 {{/if}}
                 {{#if brand.name}}
                 <p class="listItem-brand">{{brand.name}}</p>
                 {{/if}}
                 <h4 class="listItem-title">
-                    <a href="{{url}}" 
+                    <a href="{{url}}"
                     aria-label="{{name}},{{> components/products/product-aria-label}}"
                     {{#if settings.data_tag_enabled}}
                     data-event-type="product-click"
diff --git a/templates/components/products/ratings.html b/templates/components/products/ratings.html
index f9180f5570..d34fd0ef0d 100644
--- a/templates/components/products/ratings.html
+++ b/templates/components/products/ratings.html
@@ -1,5 +1,9 @@
 <span role="img"
-      aria-label="{{lang 'products.reviews.rating_aria_label' current_rating=rating max_rating=5}}"
+    {{#if rating_target}}
+      aria-label="{{lang 'products.reviews.rating_aria_label' rating_target=rating_target current_rating=rating max_rating=5}}"
+    {{else}}
+      aria-label="{{lang 'products.reviews.rating_aria_label' rating_target='Product' current_rating=rating max_rating=5}}"
+    {{/if}}
 >
     {{#for 1 5}}
         {{#if ../this.rating '>=' $index}}