BCTHEME-293 Product list item Quick view button is not tabbable (#1900)…

… (#1900) Co-authored-by: BC-tymurbiedukhin <66319629+BC-tymurbiedukhin@users.noreply.github.com>
bigcommerce · Nov 17, 2020 · 7d57ec5 · 7d57ec5
1 parent 8569e6b
commit 7d57ec5
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Product list item Quick view button is not tabbable. [#1900](https://github.com/bigcommerce/cornerstone/pull/1900)
 - Social icon tooltip displaying should be fixed. [1907](https://github.com/bigcommerce/cornerstone/pull/1907)
 - Faceted search filters are hidden from screen readers. [#1897](https://github.com/bigcommerce/cornerstone/pull/1897)
 - Write a review modal extra executions. [#1902](https://github.com/bigcommerce/cornerstone/pull/1902)

diff --git a/assets/scss/layouts/products/_productList.scss b/assets/scss/layouts/products/_productList.scss
@@ -23,6 +23,21 @@
 // -----------------------------------------------------------------------------
 
 .listItem {
+    &:focus-within {
+        .listItem-figureBody {
+            @include breakpoint("large") {
+                opacity: 1;
+            }
+        }
+    }
+
+    &.focus-within {
+        .listItem-figureBody {
+            @include breakpoint("large") {
+                opacity: 1;
+            }
+        }
+    }
 
     @include breakpoint("small") {
         @include grid-row($behavior: "nest");
@@ -52,7 +67,8 @@
     border-color: $card-figcaption-button-borderColor;
     color: $card-figcaption-button-color;
 
-    &:hover {
+    &:hover,
+    &:focus {
         background-color: $card-figcaption-button-backgroundHover;
         border-color: $card-figcaption-button-borderColor;
         color: $card-figcaption-button-color;
@@ -67,6 +83,11 @@
     margin: 0 0 spacing("single");
     position: relative;
 
+    &__link {
+        display: block;
+        margin: 3px;
+    }
+
     @include breakpoint("small") {
         margin-bottom: 0;
         padding-left: spacing("half");
@@ -78,30 +99,25 @@
         margin: spacing("single") 0;
 
         @include breakpoint("large") {
-            @include verticalPositionMiddle();
             display: inline-block;
-            margin: 0 0 spacing("single");
+            margin: 0;
             pointer-events: all;
-            transform-style: preserve-3d;
         }
-    }
-
+    }    
 }
 
 .listItem-figureBody {
     opacity: 1;
     text-align: center;
 
     @include breakpoint("large") {
-        bottom: 0;
-        height: 100%;
-        left: spacing("half");
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
         opacity: 0;
         position: absolute;
-        right: spacing("half");
-        top: 0;
 
-        &:hover {
+        .listItem:hover & {
             opacity: 1;
         }
     }

diff --git a/templates/components/products/list-item.html b/templates/components/products/list-item.html
@@ -4,6 +4,13 @@
     <article class="listItem">
 {{/if}}
     <figure class="listItem-figure">
+        <a href="{{url}}"
+           class="listItem-figure__link"
+           aria-label="{{name}},{{> components/products/product-aria-label}}"
+           {{#if settings.data_tag_enabled}}
+           data-event-type="product-click"
+           {{/if}}
+        >
         {{#or price.sale_price_with_tax.value price.sale_price_without_tax.value}}
             {{#if theme_settings.product_sale_badges '===' 'sash'}}
                 <div class="sale-flag-sash">
@@ -19,18 +26,19 @@
                     <div class="sale-flag-star"></div>
                 </div>
             {{/if}}
-        {{/or}}    
+        {{/or}}
         {{> components/common/responsive-img
             image=image
             class="listItem-image"
             fallback_size=theme_settings.productgallery_size
             lazyload=theme_settings.lazyload_mode
             default_image=theme_settings.default_image_product
         }}
+        </a>
         {{#unless hide_product_quick_view}}
             {{#if theme_settings.show_product_quick_view}}
                 <div class="listItem-figureBody">
-                    <a {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}} class="button button--small listItem-button quickview" data-product-id="{{id}}">{{lang 'products.quick_view'}}</a>
+                    <button type="button" {{#if settings.data_tag_enabled}} data-event-type="product-click" {{/if}} class="button button--small listItem-button quickview" data-product-id="{{id}}">{{lang 'products.quick_view'}}</button>
                 </div>
             {{/if}}
         {{/unless}}