From a24c4dbef88371a20caa1cefe1e4e8fdc20b9f3b Mon Sep 17 00:00:00 2001
From: Yurii Zusik <yurii.zusik@bigcommerce.com>
Date: Tue, 29 Dec 2020 16:40:28 +0200
Subject: [PATCH] feat(storefront): BCTHEME-344 Carousel buttons do not receive
 focus (#1937)

---
 CHANGELOG.md                                           | 1 +
 assets/js/theme/common/carousel/utils/setTabindexes.js | 2 +-
 templates/components/carousel-content.html             | 2 +-
 templates/components/carousel.html                     | 8 ++++++++
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0c7c96ce11..2dc545918b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # Changelog
 
 ## Draft
+- Carousel buttons do not receive focus. [#1937](https://github.com/bigcommerce/cornerstone/pull/1937)
 
 ## 5.0.0 (12-14-2020)
 - Parse HTML entities in jsContext. [#1917](https://github.com/bigcommerce/cornerstone/pull/1917)
diff --git a/assets/js/theme/common/carousel/utils/setTabindexes.js b/assets/js/theme/common/carousel/utils/setTabindexes.js
index 86335fc365..0fe2b1e103 100644
--- a/assets/js/theme/common/carousel/utils/setTabindexes.js
+++ b/assets/js/theme/common/carousel/utils/setTabindexes.js
@@ -4,7 +4,7 @@ export default ($slides, $prevArrow, $nextArrow, actualSlide, actualSlideCount)
     $slides.each((index, element) => {
         const $element = $(element);
         const tabIndex = $element.hasClass('slick-active') ? 0 : -1;
-        if (!$element.hasClass('js-product-slide')) {
+        if ($element.attr('href') !== undefined) {
             $element.attr('tabindex', tabIndex);
         }
 
diff --git a/templates/components/carousel-content.html b/templates/components/carousel-content.html
index bac1f1d5b0..4766512efa 100644
--- a/templates/components/carousel-content.html
+++ b/templates/components/carousel-content.html
@@ -2,6 +2,6 @@
     <span class="heroCarousel-title">{{{heading}}}</span>
     <p class="heroCarousel-description">{{{text}}}</p>
     {{#if button_text}}
-        <span class="heroCarousel-action button button--primary button--large">{{button_text}}</span>
+        <a href="{{url}}" aria-label="{{#if this.alt_text.length '!=' 0}}{{this.alt_text}}{{else}}{{lang 'common.carousel_slide_number' slide_number=(add @index 1)}}{{/if}}, {{button_text}}" class="heroCarousel-action button button--primary button--large">{{button_text}}</a>
     {{/if}}
 </div>
diff --git a/templates/components/carousel.html b/templates/components/carousel.html
index b5ee0718de..e623eb4f6c 100644
--- a/templates/components/carousel.html
+++ b/templates/components/carousel.html
@@ -19,7 +19,11 @@
     <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{carousel.slides.length}}" class="js-hero-prev-arrow slick-prev slick-arrow">hero-prev-arrow</button>
     {{/and}}
     {{#each carousel.slides}}
+    {{#if button_text}}
+    <div class="js-hero-slide">
+    {{else}}
     <a href="{{url}}" class="js-hero-slide" aria-label="{{#if this.alt_text.length '!=' 0}}{{this.alt_text}}{{else}}{{lang 'common.carousel_slide_number' slide_number=(add @index 1)}}{{/if}}">
+    {{/if}}
         <div class="heroCarousel-slide {{#if ../theme_settings.homepage_stretch_carousel_images}}stretch{{/if}} {{#if @first}}heroCarousel-slide--first{{/if}}">
             <div class="heroCarousel-image-wrapper">
             {{#if @first}}
@@ -50,7 +54,11 @@
                 {{/if}}
             {{/if}}
         </div>
+    {{#if button_text}}
+    </div>
+    {{else}}
     </a>
+    {{/if}}
     {{/each}}
     {{#and arrows (if carousel.slides.length '>' 1)}}
     <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{carousel.slides.length}}" class="js-hero-next-arrow slick-next slick-arrow">hero-next-arrow</button>