feat(storefront): BCTHEME-373 Alt text not provided for ratings (bigc…

…ommerce#1949)
sacr3dc0w · Mar 31, 2021 · d24b3c0 · d24b3c0
1 parent 2d30e32
commit d24b3c0
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Alt text not provided for ratings. [#1949](https://github.com/bigcommerce/cornerstone/pull/1949)
 - Fixed announcement for product on adding to cart. [#1950](https://github.com/bigcommerce/cornerstone/pull/1950)
 - Fixed non-text contrast on add to cart modal according to WCAG AA standard.  [#1946](https://github.com/bigcommerce/cornerstone/pull/1946)
 - Fixed announcement of reCAPTCHA hidden content by screen reader. [#1943](https://github.com/bigcommerce/cornerstone/pull/1943)

diff --git a/assets/scss/components/stencil/productView/_productView.scss b/assets/scss/components/stencil/productView/_productView.scss
@@ -203,11 +203,6 @@
     }
 }
 
-.productView-ratingWrapper {
-    display: inline-flex;
-    line-height: 1;
-}
-
 .productView-reviewLink {
     display: inline-block;
     margin-left: spacing("quarter");

diff --git a/templates/components/amp/products/ratings.html b/templates/components/amp/products/ratings.html
@@ -1,11 +1,16 @@
-{{#for 1 5}}
-    {{#if ../this.rating '>=' $index}}
-        <span class="icon icon--ratingFull">
-            <svg xmlns="http://www.w3.org/2000/svg" width="26" height="28" viewBox="0 0 26 28"><path d="M0 10.11q0-.58.875-.72L8.72 8.25l3.515-7.11Q12.532.5 13 .5t.767.64l3.516 7.11 7.844 1.14q.875.14.875.72 0 .343-.406.75l-5.672 5.53 1.344 7.812q.016.11.016.313 0 .328-.164.555t-.477.227q-.297 0-.625-.187l-7.016-3.687-7.016 3.687q-.344.187-.625.187-.327 0-.49-.227t-.165-.555q0-.094.03-.313L6.08 16.39.392 10.86q-.39-.423-.39-.75z"/></svg>
-        </span>
-    {{else}}
-        <span class="icon icon--ratingEmpty">
-            <svg xmlns="http://www.w3.org/2000/svg" width="26" height="28" viewBox="0 0 26 28"><path d="M0 10.11q0-.58.875-.72L8.72 8.25l3.515-7.11Q12.532.5 13 .5t.767.64l3.516 7.11 7.844 1.14q.875.14.875.72 0 .343-.406.75l-5.672 5.53 1.344 7.812q.016.11.016.313 0 .328-.164.555t-.477.227q-.297 0-.625-.187l-7.016-3.687-7.016 3.687q-.344.187-.625.187-.327 0-.49-.227t-.165-.555q0-.094.03-.313L6.08 16.39.392 10.86q-.39-.423-.39-.75z"/></svg>
-        </span>
-    {{/if}}
-{{/for}}
+<span role="img"
+      alt="{{lang 'products.reviews.rating_aria_label' current_rating=rating max_rating=5}}"
+      title="{{lang 'products.reviews.rating_aria_label' current_rating=rating max_rating=5}}"
+>
+    {{#for 1 5}}
+        {{#if ../this.rating '>=' $index}}
+            <span class="icon icon--ratingFull">
+                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="28" viewBox="0 0 26 28"><path d="M0 10.11q0-.58.875-.72L8.72 8.25l3.515-7.11Q12.532.5 13 .5t.767.64l3.516 7.11 7.844 1.14q.875.14.875.72 0 .343-.406.75l-5.672 5.53 1.344 7.812q.016.11.016.313 0 .328-.164.555t-.477.227q-.297 0-.625-.187l-7.016-3.687-7.016 3.687q-.344.187-.625.187-.327 0-.49-.227t-.165-.555q0-.094.03-.313L6.08 16.39.392 10.86q-.39-.423-.39-.75z"/></svg>
+            </span>
+        {{else}}
+            <span class="icon icon--ratingEmpty">
+                <svg xmlns="http://www.w3.org/2000/svg" width="26" height="28" viewBox="0 0 26 28"><path d="M0 10.11q0-.58.875-.72L8.72 8.25l3.515-7.11Q12.532.5 13 .5t.767.64l3.516 7.11 7.844 1.14q.875.14.875.72 0 .343-.406.75l-5.672 5.53 1.344 7.812q.016.11.016.313 0 .328-.164.555t-.477.227q-.297 0-.625-.187l-7.016-3.687-7.016 3.687q-.344.187-.625.187-.327 0-.49-.227t-.165-.555q0-.094.03-.313L6.08 16.39.392 10.86q-.39-.423-.39-.75z"/></svg>
+            </span>
+        {{/if}}
+    {{/for}}
+</span>
diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
@@ -96,12 +96,7 @@ <h2 class="productView-brand"{{#if schema}} itemprop="brand" itemscope itemtype=
                             <meta itemprop="reviewCount" content="{{product.num_reviews}}">
                         {{/if}}
                     {{/if}}
-                    <span class="productView-ratingWrapper"
-                          title="{{lang 'products.reviews.rating_aria_label' current_rating=product.rating max_rating=5}}"
-                          tabindex="0"
-                    >
                         {{> components/products/ratings rating=product.rating}}
-                    </span>
                     {{#if product.num_reviews '>' 0}}
                         <a href="{{product.url}}#product-reviews" id="productReview_link">
                             {{lang 'products.reviews.link_to_review' total=product.num_reviews}}

diff --git a/templates/components/products/ratings.html b/templates/components/products/ratings.html
@@ -1,15 +1,20 @@
-{{#for 1 5}}
-    {{#if ../this.rating '>=' $index}}
-        <span class="icon icon--ratingFull">
-            <svg>
-                <use xlink:href="#icon-star" />
-            </svg>
-        </span>
-    {{else}}
-        <span class="icon icon--ratingEmpty">
-            <svg>
-                <use xlink:href="#icon-star" />
-            </svg>
-        </span>
-    {{/if}}
-{{/for}}
+<span role="img"
+      alt="{{lang 'products.reviews.rating_aria_label' current_rating=rating max_rating=5}}"
+      title="{{lang 'products.reviews.rating_aria_label' current_rating=rating max_rating=5}}"
+>
+    {{#for 1 5}}
+        {{#if ../this.rating '>=' $index}}
+            <span class="icon icon--ratingFull">
+                <svg>
+                    <use xlink:href="#icon-star" />
+                </svg>
+            </span>
+        {{else}}
+            <span class="icon icon--ratingEmpty">
+                <svg>
+                    <use xlink:href="#icon-star" />
+                </svg>
+            </span>
+        {{/if}}
+    {{/for}}
+</span>