feat(storefront): BCTHEME-344 Carousel buttons do not receive focus (b…

…igcommerce#1937) (bigcommerce#1937)
sacr3dc0w · Mar 31, 2021 · 572ae7b · 572ae7b
1 parent 60c1fb0
commit 572ae7b
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 2 deletions.
diff --git 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)
 - Empty cart message not read by screen reader. [#1935](https://github.com/bigcommerce/cornerstone/pull/1935)
 - No tooltips provided for carousel buttons. [#1934](https://github.com/bigcommerce/cornerstone/pull/1934)
 - Added announcement on shipping estimator errors. [#1932](https://github.com/bigcommerce/cornerstone/pull/1932)

diff --git 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
@@ -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
@@ -19,7 +19,11 @@
     <button aria-label="{{lang 'carousel.arrowAriaLabel'}} {{carousel.slides.length}}" class="js-hero-prev-arrow slick-prev slick-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"></button>