fix(storefront): BCTHEME-424 Alt text should include product name for…

… ratings
bigcommerce · Mar 19, 2021 · 78d7e93 · 78d7e93
1 parent facef23
commit 78d7e93
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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/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
@@ -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/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}}