From 1e33f3e75a4706d4244d4910087f584cf5dcf811 Mon Sep 17 00:00:00 2001
From: "alex.saiannyi" <alexander.saiannyi@bigcommerce.com>
Date: Fri, 4 Sep 2020 12:38:32 +0300
Subject: [PATCH] fix(storefront):bctheme-212 fix rating icons focus border

---
 CHANGELOG.md                                                 | 1 +
 assets/scss/components/stencil/productView/_productView.scss | 5 +++++
 templates/components/products/product-view.html              | 3 ++-
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 628e9ca310..d06772dcc0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Fixed review rating icons focus border. [#1818](https://github.com/bigcommerce/cornerstone/pull/1818)
 - Review link in quick modal focused twice. [#1797](https://github.com/bigcommerce/cornerstone/pull/1797)
 - Fixed product image doesn't change on click when viewing a product with multiple images in IE11 [#1748](https://github.com/bigcommerce/cornerstone/pull/1748)
 - Fixed alt text on image change in product view [#1747](https://github.com/bigcommerce/cornerstone/pull/1747)
diff --git a/assets/scss/components/stencil/productView/_productView.scss b/assets/scss/components/stencil/productView/_productView.scss
index d09d8995d5..fce47b8c96 100644
--- a/assets/scss/components/stencil/productView/_productView.scss
+++ b/assets/scss/components/stencil/productView/_productView.scss
@@ -195,6 +195,11 @@
     }
 }
 
+.productView-ratingWrapper {
+    display: inline-flex;
+    line-height: 1;
+}
+
 .productView-reviewLink {
     display: inline-block;
     margin-left: spacing("quarter");
diff --git a/templates/components/products/product-view.html b/templates/components/products/product-view.html
index f9f1200138..aca974123b 100644
--- a/templates/components/products/product-view.html
+++ b/templates/components/products/product-view.html
@@ -96,7 +96,8 @@ <h2 class="productView-brand"{{#if schema}} itemprop="brand" itemscope itemtype=
                             <meta itemprop="reviewCount" content="{{product.num_reviews}}">
                         {{/if}}
                     {{/if}}
-                    <span title="{{lang 'products.reviews.rating_aria_label' current_rating=product.rating max_rating=5}}"
+                    <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}}