fix: scroll to top visible if consents banner is displayed (#19755)

SAP · Dec 16, 2024 · db2941f · db2941f
1 parent 4b1afcf
commit db2941f
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 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
@@ -868,6 +868,12 @@ export interface FeatureTogglesInterface {
    */
   showRealTimeStockInPDP?: boolean;
 
+  /**
+   * When enabled, the scroll-to-top button adjusts its position when other UI elements
+   * (like cookie consent banner) appear at the bottom of the page to prevent overlapping
+   */
+  a11yScrollToTopPositioning?: boolean;
+
   /**
    * Creates a section element with applied aria-label in "Review Order" page of the checkout.
    * Moves components to be children of this section element.
@@ -1026,6 +1032,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yHamburgerMenuTrapFocus: false,
   useExtendedMediaComponentConfiguration: false,
   showRealTimeStockInPDP: false,
+  a11yScrollToTopPositioning: false,
   enableSecurePasswordValidation: false,
   enableCarouselCategoryProducts: false,
 };
diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -420,6 +420,7 @@ if (environment.cpq) {
         a11yHamburgerMenuTrapFocus: true,
         useExtendedMediaComponentConfiguration: true,
         showRealTimeStockInPDP: false,
+        a11yScrollToTopPositioning: false,
         a11yWrapReviewOrderInSection: true,
         enableCarouselCategoryProducts: true,
         enableSecurePasswordValidation: true,

diff --git a/...ents/anonymous-consent-management/banner/anonymous-consent-management-banner.component.ts b/...ents/anonymous-consent-management/banner/anonymous-consent-management-banner.component.ts
@@ -5,7 +5,7 @@
  */
 
 import { Component, OnDestroy, ViewContainerRef } from '@angular/core';
-import { AnonymousConsentsService } from '@spartacus/core';
+import { AnonymousConsentsService, useFeatureStyles } from '@spartacus/core';
 import { Observable, Subscription } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import { LAUNCH_CALLER } from '../../../layout/launch-dialog/config/launch-config';
@@ -25,7 +25,9 @@ export class AnonymousConsentManagementBannerComponent implements OnDestroy {
     protected anonymousConsentsService: AnonymousConsentsService,
     protected vcr: ViewContainerRef,
     protected launchDialogService: LaunchDialogService
-  ) {}
+  ) {
+    useFeatureStyles('a11yScrollToTopPositioning');
+  }
 
   viewDetails(): void {
     this.hideBanner();

diff --git a/...les/scss/components/myaccount/anonymous-consent/_anonymous-consent-management-banner.scss b/...les/scss/components/myaccount/anonymous-consent/_anonymous-consent-management-banner.scss
@@ -50,4 +50,10 @@
       background-color: var(--cx-color-background);
     }
   }
+
+  @include forFeature('a11yScrollToTopPositioning') {
+    &:has(.anonymous-consent-banner) ~ cx-scroll-to-top {
+      bottom: 180px;
+    }
+  }
 }