fix: use role button for carousel slide indicators

SAP · Dec 18, 2024 · 08ece14 · 08ece14
1 parent f232f4d
commit 08ece14
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 25 deletions.
diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -358,6 +358,11 @@ export interface FeatureTogglesInterface {
    */
   a11yFocusableCarouselControls?: boolean;
 
+  /**
+   * Removes role="tab" from `CarouselComponent`'s indicators
+   */
+  a11yRoleButtonForCarouselControls?: boolean;
+
   /**
    * Enables only Tab/Shift+Tab keyboard navigation in dialogs and preserved default scrolling behaviour of up/down keys.
    * Components:
@@ -985,6 +990,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yHideSelectBtnForSelectedAddrOrPayment: true,
   a11ySelectLabelWithContextForSelectedAddrOrPayment: false,
   a11yFocusableCarouselControls: true,
+  a11yRoleButtonForCarouselControls: false,
   a11yUseTrapTabInsteadOfTrapInDialogs: false,
   cmsGuardsServiceUseGuardsComposer: true,
   cartQuickOrderRemoveListeningToFailEvent: true,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -343,6 +343,7 @@ if (environment.cpq) {
         a11yHideSelectBtnForSelectedAddrOrPayment: true,
         a11ySelectLabelWithContextForSelectedAddrOrPayment: true,
         a11yFocusableCarouselControls: true,
+        a11yRoleButtonForCarouselControls: true,
         a11yUseTrapTabInsteadOfTrapInDialogs: true,
         cmsGuardsServiceUseGuardsComposer: true,
         cartQuickOrderRemoveListeningToFailEvent: true,

diff --git a/projects/storefrontlib/shared/components/carousel/carousel.component.html b/projects/storefrontlib/shared/components/carousel/carousel.component.html
@@ -104,31 +104,61 @@ <h2 *ngIf="title">{{ title }}</h2>
     <ng-container *ngFor="let _ of items; let i = index">
       <!-- TODO: (CXSPA-6904) - Remove feature flag next major release -->
       <ng-container *cxFeature="'a11yFocusableCarouselControls'">
-        <button
-          *ngIf="i % size === 0"
-          (click)="$event.stopPropagation(); activeSlide = i"
-          [attr.aria-selected]="i === activeSlide"
-          [attr.aria-disabled]="i === activeSlide"
-          [attr.aria-label]="
-            'carousel.slideNumber'
-              | cxTranslate
-                : {
-                    currentSlideNumber: getSlideNumber(size, i),
-                    numberOfSlides: size,
-                  }
-          "
-          [attr.title]="
-            'carousel.slideNumber'
-              | cxTranslate
-                : {
-                    currentSlideNumber: getSlideNumber(size, i),
-                    numberOfSlides: size,
-                  }
-          "
-          role="tab"
-        >
-          <cx-icon [type]="indicatorIcon" aria-hidden="true"></cx-icon>
-        </button>
+        <ng-container *cxFeature="'!a11yRoleButtonForCarouselControls'">
+          <button
+            *ngIf="i % size === 0"
+            (click)="$event.stopPropagation(); activeSlide = i"
+            [attr.aria-selected]="i === activeSlide"
+            [attr.aria-disabled]="i === activeSlide"
+            [attr.aria-label]="
+              'carousel.slideNumber'
+                | cxTranslate
+                  : {
+                      currentSlideNumber: getSlideNumber(size, i),
+                      numberOfSlides: size,
+                    }
+            "
+            [attr.title]="
+              'carousel.slideNumber'
+                | cxTranslate
+                  : {
+                      currentSlideNumber: getSlideNumber(size, i),
+                      numberOfSlides: size,
+                    }
+            "
+            role="tab"
+          >
+            <cx-icon [type]="indicatorIcon" aria-hidden="true"></cx-icon>
+          </button>
+        </ng-container>
+        <ng-container *cxFeature="'a11yRoleButtonForCarouselControls'"
+          ><button
+            *ngIf="i % size === 0"
+            (click)="$event.stopPropagation(); activeSlide = i"
+            [attr.aria-selected]="i === activeSlide"
+            [attr.aria-disabled]="i === activeSlide"
+            [attr.aria-label]="
+              'carousel.slideNumber'
+                | cxTranslate
+                  : {
+                      currentSlideNumber: getSlideNumber(size, i),
+                      numberOfSlides: size,
+                    }
+            "
+            [attr.title]="
+              'carousel.slideNumber'
+                | cxTranslate
+                  : {
+                      currentSlideNumber: getSlideNumber(size, i),
+                      numberOfSlides: size,
+                    }
+            "
+          >
+            <cx-icon
+              [type]="indicatorIcon"
+              aria-hidden="true"
+            ></cx-icon></button
+        ></ng-container>
       </ng-container>
       <ng-container *cxFeature="'!a11yFocusableCarouselControls'">
         <button