fix(storefront): BCTHEME-188 Product cards should link to products

CHANGELOG.md

@@ -1,8 +1,8 @@
 # Changelog
 
-- Sort By dropdowns need visual focus border. [#1833](https://github.com/bigcommerce/cornerstone/pull/1833)
-
 ## Draft
+- Product cards should link to products. [#1842](https://github.com/bigcommerce/cornerstone/pull/1842)
+- Sort By dropdowns need visual focus border. [#1833](https://github.com/bigcommerce/cornerstone/pull/1833)
 - Product link has incorrect voice over focus on Cart Page. [#1830](https://github.com/bigcommerce/cornerstone/pull/1830)
 - Wishlist first option has no bottom outline when in focus. [#1825](https://github.com/bigcommerce/cornerstone/pull/1825)
 - Carousel hidden when one or more of its images not found. [#1816](https://github.com/bigcommerce/cornerstone/pull/1816)

assets/js/theme/common/carousel.js

@@ -1,12 +1,19 @@
 import 'slick-carousel';
 
 const integerRegExp = /[0-9]+/;
+const allFocusableElementsSelector = '[href], button, input, textarea, select, details, [contenteditable="true"], [tabindex]';
 
 const setSlideTabindexes = ($slides) => {
     $slides.each((index, element) => {
         const $element = $(element);
         const tabIndex = $element.hasClass('slick-active') ? 0 : -1;
-        $element.attr('tabindex', tabIndex);
+        if (!$element.hasClass('js-product-slide')) {
+            $element.attr('tabindex', tabIndex);
+        }
+
+        $element.find(allFocusableElementsSelector).each((idx, child) => {
+            $(child).attr('tabindex', tabIndex);
+        });
     });
 };
 

assets/scss/components/citadel/cards/_cards.scss

@@ -28,13 +28,21 @@
 .card-figure {
     margin-top: $card-figure-marginTop;
     position: relative;
+    padding: 3px;
+    overflow: hidden;
+
     &:hover {
 
         // scss-lint:disable NestingDepth
         .card-figcaption {
             opacity: 1;
         }
     }
+
+    &__link {
+        display: block;
+        position: relative;
+    }
 }
 
 .card-img-container {

assets/scss/components/stencil/compare/_compare.scss

@@ -112,6 +112,10 @@
         min-height: spacing("single") * 4;
         padding-top: spacing("base");
     }
+
+    .card-figure {
+        overflow: visible;
+    }
 }
 
 

assets/scss/layouts/products/_productSaleBadges.scss

@@ -33,7 +33,8 @@
 .starwrap {
     height: rem-calc(50px);
     position: absolute;
-    top: 10px;
+    top: 12px;
+    left: 12px;
     width: rem-calc(50px);
 }
 
@@ -108,7 +109,7 @@
     font-size: 15px;
     font-weight: 700;
     height: rem-calc(20px);
-    left: -35px;
+    left: -25px;
     line-height: rem-calc(16px);
     padding-top: spacing("eighth") / 2;
     position: absolute;
@@ -123,15 +124,16 @@
 .listItem-figure {
 
     .sale-flag-sash {
-        left: -25px;
+        top: 24px;
 
         @include breakpoint("small") {
-            top: 15px;
+            top: 19px;
+            left: -20px;
         }
 
         @include breakpoint("large") {
             left: -15px;
-            top: 25px;
+            top: 24px;
         }
 
     }

templates/components/products/card.html

@@ -16,7 +16,7 @@
                 </div>
             {{/if}}
         {{/or}}
-        <a href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>
+        <a class="card-figure__link" aria-label="{{name}}" href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>
             <div class="card-img-container">
                 {{> components/common/responsive-img
                     image=image

templates/pages/brands.html

@@ -14,7 +14,7 @@ <h1 class="page-heading">{{lang 'brand.label'}}</h1>
             <li class="brand">
                 <article class="card {{#if alternate}}card--alternate{{/if}}">
                     <figure class="card-figure">
-                        <a href="{{url}}">
+                        <a class="card-figure__link" aria-label="{{name}}" href="{{url}}">
                             <div class="card-img-container">
                                 {{> components/common/responsive-img
                                     image=image

templates/pages/compare.html

@@ -13,15 +13,17 @@ <h1 class="page-heading">{{lang 'compare.header' products=comparisons.length}}</
                 <th class="compareTable-product">
                     <article class="card">
                         <figure class="card-figure">
-                            <div class="card-img-container">
-                                {{> components/common/responsive-img
-                                    image=image
-                                    class="card-image"
-                                    fallback_size=../theme_settings.product_size
-                                    lazyload=../theme_settings.lazyload_mode
-                                    default_image=../theme_settings.default_image_product
-                                }}
-                            </div>
+                            <a class="card-figure__link" aria-label="{{name}}" href="{{url}}" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}}>
+                                <div class="card-img-container">
+                                    {{> components/common/responsive-img
+                                        image=image
+                                        class="card-image"
+                                        fallback_size=../theme_settings.product_size
+                                        lazyload=../theme_settings.lazyload_mode
+                                        default_image=../theme_settings.default_image_product
+                                    }}
+                                </div>
+                            </a>
                             <a class="compareTable-removeProduct" data-comparison-remove href="{{#if remove_url}}{{remove_url}}{{else}}#{{/if}}">
                                 <svg class="icon">
                                     <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-close"></use>