diff --git a/CHANGELOG.md b/CHANGELOG.md index 8a58a8100b..f8e73400b2 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/assets/js/theme/common/carousel.js b/assets/js/theme/common/carousel.js index d6fd18064c..23b7dbd268 100644 --- a/assets/js/theme/common/carousel.js +++ b/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); + }); }); }; diff --git a/assets/scss/components/citadel/cards/_cards.scss b/assets/scss/components/citadel/cards/_cards.scss index d8b8131dd4..0043ab9bd1 100644 --- a/assets/scss/components/citadel/cards/_cards.scss +++ b/assets/scss/components/citadel/cards/_cards.scss @@ -28,6 +28,9 @@ .card-figure { margin-top: $card-figure-marginTop; position: relative; + padding: 3px; + overflow: hidden; + &:hover { // scss-lint:disable NestingDepth @@ -35,6 +38,11 @@ opacity: 1; } } + + &__link { + display: block; + position: relative; + } } .card-img-container { diff --git a/assets/scss/components/stencil/compare/_compare.scss b/assets/scss/components/stencil/compare/_compare.scss index 293feddaac..459f081c77 100644 --- a/assets/scss/components/stencil/compare/_compare.scss +++ b/assets/scss/components/stencil/compare/_compare.scss @@ -112,6 +112,10 @@ min-height: spacing("single") * 4; padding-top: spacing("base"); } + + .card-figure { + overflow: visible; + } } diff --git a/assets/scss/layouts/products/_productSaleBadges.scss b/assets/scss/layouts/products/_productSaleBadges.scss index 6d0cfb3a2d..6bdc6cd6c6 100644 --- a/assets/scss/layouts/products/_productSaleBadges.scss +++ b/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; } } diff --git a/templates/components/products/card.html b/templates/components/products/card.html index 4866275c70..31c6ac0ce0 100644 --- a/templates/components/products/card.html +++ b/templates/components/products/card.html @@ -16,7 +16,7 @@ {{/if}} {{/or}} - +
{{> components/common/responsive-img image=image diff --git a/templates/pages/brands.html b/templates/pages/brands.html index 30404ec421..df8dd36d66 100644 --- a/templates/pages/brands.html +++ b/templates/pages/brands.html @@ -14,7 +14,7 @@

{{lang 'brand.label'}}

  • - +
    {{> components/common/responsive-img image=image diff --git a/templates/pages/compare.html b/templates/pages/compare.html index e7cb3a7dd9..012f416d39 100644 --- a/templates/pages/compare.html +++ b/templates/pages/compare.html @@ -13,15 +13,17 @@

    {{lang 'compare.header' products=comparisons.length}}