fix(a11y): Focus outline visible for future stock accordion (#19459) (#…

…19615)
SAP · Nov 25, 2024 · e961d4b · e961d4b
1 parent 5d8ac1a
commit e961d4b
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 0 deletions.
diff --git a/feature-libs/product-configurator/common/styles/_configure-product.scss b/feature-libs/product-configurator/common/styles/_configure-product.scss
@@ -16,6 +16,10 @@ cx-page-slot {
         padding-inline-start: 20px;
         padding-inline-end: 20px;
         padding-block-end: 0px;
+
+        @include forFeature('a11yPdpGridArrangement') {
+          grid-row: unset;
+        }
       }
     }
   }

diff --git a/feature-libs/product/future-stock/styles/_future-stock-accordion.scss b/feature-libs/product/future-stock/styles/_future-stock-accordion.scss
@@ -11,6 +11,10 @@ cx-future-stock-accordion {
       padding-inline-start: unset;
       margin-inline-start: 1.25rem;
       padding: 0;
+
+      @include media-breakpoint-down(md) {
+        margin-inline-start: 0;
+      }
     }
     margin: 0.5rem auto;
     cursor: pointer;

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
@@ -756,6 +756,19 @@ export interface FeatureTogglesInterface {
    */
   allPageMetaResolversEnabledInCsr?: boolean;
 
+  /**
+   * Modifies grid arrangement in Product Details Page for better accessibility:
+   * - add to cart button should be last step
+   * - future stock accordion is moved before add to cart button
+   */
+  a11yPdpGridArrangement?: boolean;
+
+  /**
+   * CDS/ISS is integrated into the SAP Cloud Identity Service (SCI). The downstream services use different domains and URL formats.
+   * This feature toggle can be used to make the CDS module use these new URLs.
+   */
+  sciEnabled?: boolean;
+
   /**
    * When enabled, allows to provide extended formats and media queries for <picture> element if used in MediaComponent.
    *
@@ -911,5 +924,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   enableConsecutiveCharactersPasswordRequirement: false,
   enablePasswordsCannotMatchInPasswordUpdateForm: false,
   allPageMetaResolversEnabledInCsr: false,
+  a11yPdpGridArrangement: false,
+  sciEnabled: false,
   useExtendedMediaComponentConfiguration: false,
 };
diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -402,6 +402,8 @@ if (environment.cpq) {
         enableConsecutiveCharactersPasswordRequirement: true,
         enablePasswordsCannotMatchInPasswordUpdateForm: true,
         allPageMetaResolversEnabledInCsr: true,
+        a11yPdpGridArrangement: true,
+        sciEnabled: true,
         useExtendedMediaComponentConfiguration: true,
         a11yWrapReviewOrderInSection: true,
       };

diff --git a/projects/storefrontlib/layout/main/storefront.component.ts b/projects/storefrontlib/layout/main/storefront.component.ts
@@ -82,6 +82,7 @@ export class StorefrontComponent implements OnInit, OnDestroy {
     useFeatureStyles('a11yImproveContrast');
     useFeatureStyles('cmsBottomHeaderSlotUsingFlexStyles');
     useFeatureStyles('headerLayoutForSmallerViewports');
+    useFeatureStyles('a11yPdpGridArrangement');
   }
 
   ngOnInit(): void {

diff --git a/projects/storefrontstyles/scss/layout/page-templates/_product-detail.scss b/projects/storefrontstyles/scss/layout/page-templates/_product-detail.scss
@@ -17,9 +17,17 @@
         grid-template-columns: 1fr 1fr;
         grid-template-rows: repeat(5, auto) 1fr;
 
+        @include forFeature('a11yPdpGridArrangement') {
+          grid-template-rows: repeat(6, auto) 1fr;
+        }
+
         cx-product-images {
           grid-column: 1;
           grid-row: 1 / span 6;
+
+          @include forFeature('a11yPdpGridArrangement') {
+            grid-row: 1 / span 7;
+          }
         }
 
         cx-product-intro {
@@ -42,6 +50,10 @@
           padding-inline-end: 20px;
           padding-bottom: 0px;
           padding-inline-start: 20px;
+
+          @include forFeature('a11yPdpGridArrangement') {
+            grid-row: unset;
+          }
         }
 
         cx-stock-notification {