fix(storefront):bctheme-212 fix rating icons focus border

bigcommerce · Sep 4, 2020 · bb59bae · bb59bae
1 parent cea4c32
commit bb59bae
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
+- 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
@@ -195,6 +195,11 @@
     }
 }
 
+.productView-iconWrapper {
+    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
@@ -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-iconWrapper"
+                          title="{{lang 'products.reviews.rating_aria_label' current_rating=product.rating max_rating=5}}"
                           tabindex="0"
                     >
                         {{> components/products/ratings rating=product.rating}}