Revert "fix: elevate scroll to top button when overlaps with banner (CXSPA-9067)" (#19749)

Co-authored-by: Radhep Sabapathipillai <[email protected]>

Author: Zeyber

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

@@ -840,12 +840,6 @@ 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.
@@ -983,7 +977,6 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   allPageMetaResolversEnabledInCsr: false,
   a11yPdpGridArrangement: false,
   useExtendedMediaComponentConfiguration: false,
-  a11yScrollToTopPositioning: false,
   showRealTimeStockInPDP: false,
   enableSecurePasswordValidation: false,
 };

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

@@ -415,7 +415,6 @@ if (environment.cpq) {
         allPageMetaResolversEnabledInCsr: true,
         a11yPdpGridArrangement: true,
         useExtendedMediaComponentConfiguration: true,
-        a11yScrollToTopPositioning: true,
         showRealTimeStockInPDP: false,
         a11yWrapReviewOrderInSection: true,
         enableSecurePasswordValidation: true,

projects/storefrontlib/cms-components/navigation/scroll-to-top/scroll-to-top.component.html

@@ -3,7 +3,6 @@
   [attr.aria-label]="'navigation.scrollToTop' | cxTranslate"
   [title]="'navigation.scrollToTop' | cxTranslate"
   class="cx-scroll-to-top-btn"
-  [class.elevated-position]="elevatedPosition$ | async"
   (click)="scrollToTop($event)"
   (focusout)="onFocusOut()"
   (keydown.Tab)="onTab($event)"

projects/storefrontlib/cms-components/navigation/scroll-to-top/scroll-to-top.component.spec.ts

@@ -2,7 +2,6 @@ import { DebugElement } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import {
-  AnonymousConsentsService,
   CmsScrollToTopComponent,
   FeatureConfigService,
   I18nTestingModule,
@@ -29,12 +28,6 @@ class MockFeatureConfigService {
   }
 }
 
-class MockAnonymousConsentsService {
-  isBannerVisible() {
-    return of(false);
-  }
-}
-
 describe('ScrollToTopComponent', () => {
   let component: ScrollToTopComponent;
   let fixture: ComponentFixture<ScrollToTopComponent>;
@@ -55,10 +48,6 @@ describe('ScrollToTopComponent', () => {
           provide: FeatureConfigService,
           useClass: MockFeatureConfigService,
         },
-        {
-          provide: AnonymousConsentsService,
-          useClass: MockAnonymousConsentsService,
-        },
       ],
     }).compileComponents();
 

projects/storefrontlib/cms-components/navigation/scroll-to-top/scroll-to-top.component.ts

@@ -20,10 +20,8 @@ import {
   FeatureConfigService,
   ScrollBehavior,
   WindowRef,
-  AnonymousConsentsService,
-  useFeatureStyles,
 } from '@spartacus/core';
-import { take, Observable } from 'rxjs';
+import { take } from 'rxjs/operators';
 import { CmsComponentData } from '../../../cms-structure/page/model/cms-component-data';
 import { SelectFocusUtility } from '../../../layout/a11y/index';
 import { ICON_TYPE } from '../../misc/icon/icon.model';
@@ -39,7 +37,6 @@ export class ScrollToTopComponent implements OnInit {
   @HostBinding('class.display')
   display: boolean | undefined;
 
-  protected elevatedPosition$: Observable<boolean> | undefined;
   protected window: Window | undefined = this.winRef.nativeWindow;
   protected scrollBehavior: ScrollBehavior = ScrollBehavior.SMOOTH;
   protected displayThreshold: number = (this.window?.innerHeight ?? 400) / 2;
@@ -52,26 +49,15 @@ export class ScrollToTopComponent implements OnInit {
   @Optional() protected featureConfigService = inject(FeatureConfigService, {
     optional: true,
   });
-  @Optional() protected anonymousConsentsService = inject(
-    AnonymousConsentsService,
-    {
-      optional: true,
-    }
-  );
 
   constructor(
     protected winRef: WindowRef,
     protected componentData: CmsComponentData<CmsScrollToTopComponent>,
     protected selectFocusUtility: SelectFocusUtility
-  ) {
-    useFeatureStyles('a11yScrollToTopPositioning');
-  }
+  ) {}
 
   ngOnInit(): void {
     this.setConfig();
-    if (this.featureConfigService?.isEnabled('a11yScrollToTopPositioning')) {
-      this.elevatedPosition$ = this.anonymousConsentsService?.isBannerVisible();
-    }
   }
 
   @HostListener('window:scroll', ['$event'])

projects/storefrontstyles/scss/components/content/navigation/_scroll-to-top.scss

@@ -12,12 +12,6 @@
     animation: popup 1s 1;
   }
 
-  @include forFeature('a11yScrollToTopPositioning') {
-    &:has(.elevated-position) {
-      bottom: 180px;
-    }
-  }
-
   button {
     height: inherit;
     width: inherit;