(CXSPA-8024) - Focus issue on remove button at count 2

feature-libs/cart/base/styles/components/_item-counter.scss

@@ -13,6 +13,7 @@
       -moz-appearance: textfield;
     }
   }
+
   &.readonly {
     button {
       display: none;
@@ -77,8 +78,17 @@
       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') {
@@ -90,9 +100,15 @@
       &: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);
+        }
+      }
     }
   }
 

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

@@ -582,6 +582,12 @@ 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;
+
   /**
    * `ProductIntroComponent` should now scroll to the Review tab on the first click of the 'Show Review' button.
    */
@@ -765,6 +771,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yDialogTriggerRefocus: false,
   a11yAddToWishlistFocus: false,
   a11ySearchBoxFocusOnEscape: false,
+  a11yItemCounterFocus: false,
   a11yScrollToReviewByShowReview: false,
   a11yViewHoursButtonIconContrast: false,
   occCartNameAndDescriptionInHttpRequestBody: false,

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

@@ -376,6 +376,7 @@ if (environment.cpq) {
         a11yDialogTriggerRefocus: true,
         a11yAddToWishlistFocus: true,
         a11ySearchBoxFocusOnEscape: true,
+        a11yItemCounterFocus: true,
         a11yScrollToReviewByShowReview: true,
         a11yViewHoursButtonIconContrast: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,

projects/storefrontlib/shared/components/item-counter/item-counter.component.html

@@ -1,4 +1,17 @@
 <button
+  *cxFeature="'a11yItemCounterFocus'"
+  type="button"
+  (click)="decrement()"
+  [attr.aria-disabled]="control.disabled || control.value <= min"
+  [tabindex]="control.disabled || control.value <= min ? -1 : 0"
+  [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"
@@ -24,6 +37,18 @@
   [attr.aria-describedby]="ariaDescribedById"
 />
 <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"

projects/storefrontlib/shared/components/item-counter/item-counter.component.spec.ts

@@ -8,6 +8,8 @@ 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({
@@ -21,7 +23,11 @@ describe('ItemCounterComponent', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [RouterTestingModule, ReactiveFormsModule, I18nTestingModule],
-      declarations: [ItemCounterComponent],
+      declarations: [
+        ItemCounterComponent,
+        MockFeatureDirective,
+        MockKeyboardFocusDirective,
+      ],
     }).compileComponents();
   }));
 
@@ -154,7 +160,11 @@ describe('ItemCounterComponent', () => {
       const button: DebugElement[] = fixture.debugElement.queryAll(
         By.css('button')
       );
-      expect((<HTMLButtonElement>button[1].nativeElement).disabled).toBeFalsy();
+      expect(
+        (<HTMLButtonElement>button[1].nativeElement).getAttribute(
+          'aria-disabled'
+        )
+      ).toBe('false');
     });
 
     it('should disable increase button if max number is reached', () => {
@@ -165,8 +175,10 @@ describe('ItemCounterComponent', () => {
         By.css('button')
       );
       expect(
-        (<HTMLButtonElement>button[1].nativeElement).disabled
-      ).toBeTruthy();
+        (<HTMLButtonElement>button[1].nativeElement).getAttribute(
+          'aria-disabled'
+        )
+      ).toBe('true');
     });
   });
 
@@ -201,7 +213,11 @@ describe('ItemCounterComponent', () => {
       const button: DebugElement[] = fixture.debugElement.queryAll(
         By.css('button')
       );
-      expect((<HTMLButtonElement>button[0].nativeElement).disabled).toBeFalsy();
+      expect(
+        (<HTMLButtonElement>button[0].nativeElement).getAttribute(
+          'aria-disabled'
+        )
+      ).toBe('false');
     });
 
     it('should disable decrease button if min number is reached', () => {
@@ -212,8 +228,10 @@ describe('ItemCounterComponent', () => {
         By.css('button')
       );
       expect(
-        (<HTMLButtonElement>button[0].nativeElement).disabled
-      ).toBeTruthy();
+        (<HTMLButtonElement>button[0].nativeElement).getAttribute(
+          'aria-disabled'
+        )
+      ).toBe('true');
     });
   });
 

projects/storefrontlib/shared/components/item-counter/item-counter.component.ts

@@ -91,6 +91,7 @@ export class ItemCounterComponent implements OnInit, OnDestroy {
 
   constructor() {
     useFeatureStyles('a11yVisibleFocusOverflows');
+    useFeatureStyles('a11yItemCounterFocus');
   }
 
   // TODO: (CXSPA-6034) Remove HostListener next major release

projects/storefrontlib/shared/components/item-counter/item-counter.module.ts

@@ -7,12 +7,18 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
-import { I18nModule } from '@spartacus/core';
+import { FeaturesConfigModule, 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],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    I18nModule,
+    KeyboardFocusModule,
+    FeaturesConfigModule,
+  ],
   declarations: [ItemCounterComponent],
   exports: [ItemCounterComponent],
 })