feat(storefront): BCTHEME-127 Product ratings on PDPs should have ari…

…a-hidden=true (#1769)
bigcommerce · Aug 26, 2020 · 02b009f · 02b009f
1 parent cb736f7
commit 02b009f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Added additional focusable element for rating announcing. [#1769](https://github.com/bigcommerce/cornerstone/pull/1769)
 - Error messages from Write a Review should be announced. [#1777](https://github.com/bigcommerce/cornerstone/pull/1777)
 - Fixed issue with missing logo on mobile and tablet. [#1767](https://github.com/bigcommerce/cornerstone/pull/1767)
 - Visually hidden cart link read by screen reader. [#1770](https://github.com/bigcommerce/cornerstone/pull/1770)

diff --git a/lang/en.json b/lang/en.json
@@ -703,6 +703,7 @@
             "rating_label": "Rating",
             "select_rating": "Select Rating",
             "anonymous_poster": "Unknown",
+            "rating_aria_label": "Product rating is {current_rating} of {max_rating}",
             "rating": {
                 "1": "1 star (worst)",
                 "2": "2 stars",

diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
@@ -96,7 +96,12 @@ <h2 class="productView-brand"{{#if schema}} itemprop="brand" itemscope itemtype=
                             <meta itemprop="reviewCount" content="{{product.num_reviews}}">
                         {{/if}}
                     {{/if}}
-                    {{> components/products/ratings rating=product.rating}}
+                    <span title="{{lang 'products.reviews.rating_aria_label' current_rating=product.rating max_rating=5}}"
+                          tabindex="0"
+                          role="text"
+                    >
+                        {{> components/products/ratings rating=product.rating}}
+                    </span>
                     <span class="productView-reviewLink">
                         {{#if product.num_reviews '>' 0}}
                             <a href="{{product.url}}#product-reviews">