From 350ca9267e40f5bc3a7a8b19245a8cbf60a194e8 Mon Sep 17 00:00:00 2001
From: Tymur Biedukhin <tymur.biedukhin@bigcommerce.com>
Date: Thu, 6 Aug 2020 12:53:03 +0300
Subject: [PATCH] feat(storefront): BCTHEME-127 Product ratings on PDPs should
 have aria-hidden=true

---
 CHANGELOG.md                                    | 1 +
 lang/en.json                                    | 1 +
 templates/components/products/product-view.html | 7 ++++++-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index f8586c4735..caa1726782 100644
--- 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)
 
 ## 4.9.0 (08-05-2020)
 
diff --git a/lang/en.json b/lang/en.json
index e96138388c..821c5de2eb 100755
--- a/lang/en.json
+++ b/lang/en.json
@@ -701,6 +701,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
index ab8f188d95..dcde5563d3 100644
--- a/templates/components/products/product-view.html
+++ b/templates/components/products/product-view.html
@@ -38,7 +38,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">