fix(storefront): BCTHEME-217 Product link has incorrect voice over fo…

…cus on Cart Page
bigcommerce · Oct 5, 2020 · 32a6e64 · 32a6e64
1 parent 797b3da
commit 32a6e64
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Product link has incorrect voice over focus on Cart Page. [#1830](https://github.com/bigcommerce/cornerstone/pull/1830)
 - Create unified focus styling in Cornerstone. [#1812](https://github.com/bigcommerce/cornerstone/pull/1812)
 - 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)

diff --git a/assets/scss/components/stencil/cart/_cart.scss b/assets/scss/components/stencil/cart/_cart.scss
@@ -275,6 +275,11 @@ $cart-item-label-offset:                $cart-thumbnail-maxWidth + $cart-item-sp
 .cart-item-name {
     font-size: fontSize("smaller");
     margin: 0;
+    display: inline-block;
+
+    &__label {
+        display: inline-block;
+    }
 
     + .definitionList {
         margin-top: spacing("quarter");

diff --git a/templates/components/cart/content.html b/templates/components/cart/content.html
@@ -27,7 +27,9 @@
                     {{#if brand.name}}
                         <p class="cart-item-brand">{{brand.name}}</p>
                     {{/if}}
-                    <h2 class="cart-item-name"><a href="{{url}}">{{name}}</a></h2>
+                    <h2 class="cart-item-name">
+                        <a class="cart-item-name__label" href="{{url}}">{{name}}</a>
+                    </h2>
                     {{#if release_date}}
                         <p>({{release_date}})</p>
                     {{/if}}