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

… ratings (bigcommerce#2015)
sacr3dc0w · Mar 31, 2021 · e9028ba · e9028ba
1 parent bf333cd
commit e9028ba
Show file tree

Hide file tree

Showing 8 changed files with 23 additions and 14 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)
 - Changed insufficient "Change" link text on cart page. [#2014](https://github.com/bigcommerce/cornerstone/pull/2014)
 - Added labeling for edit fields on cart page. [#2016](https://github.com/bigcommerce/cornerstone/pull/2016)
 - Add placeholder for failed to load carousel images and update scalability. [#2009](https://github.com/bigcommerce/cornerstone/pull/2009)

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/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
@@ -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/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
@@ -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}}