feat: (CXSPA-9024) - Fix the issue where the focus only covers three …

…sides of the 'Previous slide' and 'Next slide' buttons within the carousel section (#19719)

projects/core/src/features-config/feature-toggles/config/feature-toggles.ts

@@ -741,6 +741,12 @@ export interface FeatureTogglesInterface {
    */
   a11yDifferentiateFocusedAndSelected?: boolean;
 
+  /**
+   * Adds horizontal padding to the 'carousel-panel' to fix the issue where the focus only covers three sides of the 'Previous slide' and 'Next slide' buttons within the carousel section.
+   * Affects: CarouselComponent
+   */
+  a11yAddPaddingToCarouselPanel?: boolean;
+
   /**
    * In OCC cart requests, it puts parameters of a cart name and cart description
    * into a request body, instead of query params.
@@ -968,6 +974,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yTableHeaderReadout: false,
   a11ySearchboxAssistiveMessage: false,
   a11yDifferentiateFocusedAndSelected: false,
+  a11yAddPaddingToCarouselPanel: false,
   occCartNameAndDescriptionInHttpRequestBody: false,
   cmsBottomHeaderSlotUsingFlexStyles: false,
   useSiteThemeService: false,

projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts

@@ -407,6 +407,7 @@ if (environment.cpq) {
         a11yTableHeaderReadout: true,
         a11ySearchboxAssistiveMessage: true,
         a11yDifferentiateFocusedAndSelected: true,
+        a11yAddPaddingToCarouselPanel: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,
         useSiteThemeService: false,
         enableConsecutiveCharactersPasswordRequirement: true,

projects/storefrontlib/shared/components/carousel/carousel.component.ts

@@ -20,8 +20,8 @@ import { LoggerService, useFeatureStyles } from '@spartacus/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { ICON_TYPE } from '../../../cms-components/misc/icon/icon.model';
-import { CarouselService } from './carousel.service';
 import { disableTabbingForTick } from '../../../layout/a11y';
+import { CarouselService } from './carousel.service';
 
 /**
  * Generic carousel component that can be used to render any carousel items,
@@ -96,6 +96,7 @@ export class CarouselComponent implements OnInit, OnChanges {
     protected service: CarouselService
   ) {
     useFeatureStyles('a11yFocusableCarouselControls');
+    useFeatureStyles('a11yAddPaddingToCarouselPanel');
   }
 
   ngOnInit() {

projects/storefrontstyles/scss/components/product/carousel/_carousel.scss

@@ -19,6 +19,10 @@
     display: flex;
     justify-content: space-between;
 
+    @include forFeature('a11yAddPaddingToCarouselPanel') {
+      padding: 0 0.375rem;
+    }
+
     // TODO: (CXSPA-6904) - Remove feature flag next major release
     @include forFeature('a11yFocusableCarouselControls') {
       align-items: center;