Revert "feat: (CXSPA-8024) - Focus issue on remove button at count 2" (…

…#19388)
SAP · Oct 11, 2024 · 8628647 · 8628647
1 parent 9cfdfd1
commit 8628647
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 82 deletions.
diff --git a/feature-libs/cart/base/styles/components/_item-counter.scss b/feature-libs/cart/base/styles/components/_item-counter.scss
@@ -13,7 +13,6 @@
       -moz-appearance: textfield;
     }
   }
-
   &.readonly {
     button {
       display: none;
@@ -78,17 +77,8 @@
       font-weight: var(--cx-font-weight-bold);
     }
 
-    // TODO: The styles for ":disabled" selector should be deleted when "a11yItemCounterFocus" feature flag has been removed
     &:disabled {
       color: var(--cx-color-light);
-      cursor: not-allowed;
-    }
-
-    @include forFeature('a11yItemCounterFocus') {
-      &[aria-disabled='true'] {
-        color: var(--cx-color-light);
-        cursor: not-allowed;
-      }
     }
 
     @include forFeature('a11yImproveContrast') {
@@ -100,15 +90,9 @@
       &:focus {
         box-shadow: 0 0 0 0;
       }
-      // TODO: The styles for ":disabled" selector should be deleted when "a11yItemCounterFocus" feature flag has been removed
       &:disabled {
         color: var(--cx-color-dark);
       }
-      @include forFeature('a11yItemCounterFocus') {
-        &[aria-disabled='true'] {
-          color: var(--cx-color-dark);
-        }
-      }
     }
   }
 

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
@@ -576,12 +576,6 @@ export interface FeatureTogglesInterface {
    */
   a11ySearchBoxFocusOnEscape?: boolean;
 
-  /**
-   * In `ItemCounterComponenet`, Remove button no longer lose focus after activating when count is 2.
-   * Add button no longer lose focus after activating when count is `max - 1`.
-   */
-  a11yItemCounterFocus?: boolean;
-
   /**
    * In OCC cart requests, it puts parameters of a cart name and cart description
    * into a request body, instead of query params.
@@ -724,7 +718,6 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yDialogTriggerRefocus: false,
   a11yAddToWishlistFocus: false,
   a11ySearchBoxFocusOnEscape: false,
-  a11yItemCounterFocus: false,
   occCartNameAndDescriptionInHttpRequestBody: false,
   cmsBottomHeaderSlotUsingFlexStyles: false,
   useSiteThemeService: false,

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -375,7 +375,6 @@ if (environment.cpq) {
         a11yDialogTriggerRefocus: true,
         a11yAddToWishlistFocus: true,
         a11ySearchBoxFocusOnEscape: true,
-        a11yItemCounterFocus: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,
         useSiteThemeService: false,
         enableConsecutiveCharactersPasswordRequirement: true,

diff --git a/projects/storefrontlib/shared/components/item-counter/item-counter.component.html b/projects/storefrontlib/shared/components/item-counter/item-counter.component.html
@@ -1,16 +1,4 @@
 <button
-  *cxFeature="'a11yItemCounterFocus'"
-  type="button"
-  (click)="decrement()"
-  [attr.aria-disabled]="control.disabled || control.value <= min"
-  [cxFocus]="{ key: 'decrement' }"
-  attr.aria-label="{{ 'itemCounter.removeOne' | cxTranslate }}"
-  title="{{ 'itemCounter.removeOne' | cxTranslate }}"
->
-  -
-</button>
-<button
-  *cxFeature="'!a11yItemCounterFocus'"
   type="button"
   (click)="decrement()"
   [disabled]="control.disabled || control.value <= min"
@@ -35,18 +23,6 @@
   attr.aria-label="{{ 'itemCounter.quantity' | cxTranslate }}"
 />
 <button
-  *cxFeature="'a11yItemCounterFocus'"
-  type="button"
-  (click)="increment()"
-  [attr.aria-disabled]="control.disabled || control.value >= max"
-  [cxFocus]="{ key: 'increment' }"
-  attr.aria-label="{{ 'itemCounter.addOneMore' | cxTranslate }}"
-  title="{{ 'itemCounter.addOneMore' | cxTranslate }}"
->
-  +
-</button>
-<button
-  *cxFeature="'!a11yItemCounterFocus'"
   type="button"
   (click)="increment()"
   [disabled]="control.disabled || control.value >= max"

diff --git a/projects/storefrontlib/shared/components/item-counter/item-counter.component.spec.ts b/projects/storefrontlib/shared/components/item-counter/item-counter.component.spec.ts
@@ -8,8 +8,6 @@ import {
 import { By } from '@angular/platform-browser';
 import { RouterTestingModule } from '@angular/router/testing';
 import { I18nTestingModule } from '@spartacus/core';
-import { MockKeyboardFocusDirective } from '@spartacus/storefront';
-import { MockFeatureDirective } from '../../test/mock-feature-directive';
 import { ItemCounterComponent } from './item-counter.component';
 
 const form = new UntypedFormGroup({
@@ -23,11 +21,7 @@ describe('ItemCounterComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [RouterTestingModule, ReactiveFormsModule, I18nTestingModule],
-      declarations: [
-        ItemCounterComponent,
-        MockFeatureDirective,
-        MockKeyboardFocusDirective,
-      ],
+      declarations: [ItemCounterComponent],
     }).compileComponents();
   }));
 
@@ -160,11 +154,7 @@ describe('ItemCounterComponent', () => {
       const button: DebugElement[] = fixture.debugElement.queryAll(
         By.css('button')
       );
-      expect(
-        (<HTMLButtonElement>button[1].nativeElement).getAttribute(
-          'aria-disabled'
-        )
-      ).toBe('false');
+      expect((<HTMLButtonElement>button[1].nativeElement).disabled).toBeFalsy();
     });
 
     it('should disable increase button if max number is reached', () => {
@@ -175,10 +165,8 @@ describe('ItemCounterComponent', () => {
         By.css('button')
       );
       expect(
-        (<HTMLButtonElement>button[1].nativeElement).getAttribute(
-          'aria-disabled'
-        )
-      ).toBe('true');
+        (<HTMLButtonElement>button[1].nativeElement).disabled
+      ).toBeTruthy();
     });
   });
 
@@ -213,11 +201,7 @@ describe('ItemCounterComponent', () => {
       const button: DebugElement[] = fixture.debugElement.queryAll(
         By.css('button')
       );
-      expect(
-        (<HTMLButtonElement>button[0].nativeElement).getAttribute(
-          'aria-disabled'
-        )
-      ).toBe('false');
+      expect((<HTMLButtonElement>button[0].nativeElement).disabled).toBeFalsy();
     });
 
     it('should disable decrease button if min number is reached', () => {
@@ -228,10 +212,8 @@ describe('ItemCounterComponent', () => {
         By.css('button')
       );
       expect(
-        (<HTMLButtonElement>button[0].nativeElement).getAttribute(
-          'aria-disabled'
-        )
-      ).toBe('true');
+        (<HTMLButtonElement>button[0].nativeElement).disabled
+      ).toBeTruthy();
     });
   });
 

diff --git a/projects/storefrontlib/shared/components/item-counter/item-counter.component.ts b/projects/storefrontlib/shared/components/item-counter/item-counter.component.ts
@@ -85,7 +85,6 @@ export class ItemCounterComponent implements OnInit, OnDestroy {
 
   constructor() {
     useFeatureStyles('a11yVisibleFocusOverflows');
-    useFeatureStyles('a11yItemCounterFocus');
   }
 
   // TODO: (CXSPA-6034) Remove HostListener next major release

diff --git a/projects/storefrontlib/shared/components/item-counter/item-counter.module.ts b/projects/storefrontlib/shared/components/item-counter/item-counter.module.ts
@@ -7,18 +7,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { FeaturesConfigModule, I18nModule } from '@spartacus/core';
+import { I18nModule } from '@spartacus/core';
 import { KeyboardFocusModule } from '../../../layout/a11y/keyboard-focus/keyboard-focus.module';
 import { ItemCounterComponent } from './item-counter.component';
 
 @NgModule({
-  imports: [
-    CommonModule,
-    ReactiveFormsModule,
-    I18nModule,
-    KeyboardFocusModule,
-    FeaturesConfigModule,
-  ],
+  imports: [CommonModule, ReactiveFormsModule, I18nModule, KeyboardFocusModule],
   declarations: [ItemCounterComponent],
   exports: [ItemCounterComponent],
 })