Merge branch 'develop' into renovate/jsonc-parser-3.x

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);
+        }
+      }
     }
   }
 

feature-libs/order/components/amend-order/amend-order-actions/amend-order-actions.component.html

@@ -1,5 +1,6 @@
 <div class="col-xs-12 col-md-4 col-lg-3">
   <a
+    role="button"
     [routerLink]="
       {
         cxRoute: backRoute,

feature-libs/order/components/order-details/order-detail-actions/order-detail-actions.component.html

@@ -11,6 +11,7 @@
 
     <div class="col-xs-12 col-md-4 col-lg-3">
       <a
+        role="button"
         *ngIf="order.cancellable"
         [routerLink]="
           {
@@ -24,6 +25,7 @@
       </a>
 
       <a
+        role="button"
         *ngIf="order.returnable"
         [routerLink]="
           {

feature-libs/order/components/replenishment-order-details/replenishment-order-cancellation/replenishment-order-cancellation.component.html

@@ -1,6 +1,7 @@
 <div class="cx-cancel-replenishment-btns row">
   <div class="col-xs-12 col-md-5 col-lg-4">
     <a
+      role="button"
       class="btn btn-block btn-secondary"
       [routerLink]="
         {

feature-libs/organization/order-approval/components/details/order-approval-detail-form/order-approval-detail-form.component.html

@@ -85,6 +85,7 @@
       <div class="form-group row">
         <div class="col-lg-4 col-md-12">
           <a
+            role="button"
             [routerLink]="{ cxRoute: 'orderApprovals' } | cxUrl"
             class="btn btn-block btn-secondary"
             >{{ 'orderApprovalDetails.back' | cxTranslate }}</a

feature-libs/user/account/components/login-register/login-register.component.html

@@ -20,6 +20,7 @@
   <ng-container *cxFeature="'!a11yUseButtonsForBtnLinks'">
     <ng-container *ngIf="!loginAsGuest">
       <a
+        role="button"
         [routerLink]="{ cxRoute: 'register' } | cxUrl"
         class="btn btn-block btn-secondary btn-register"
         >{{ 'loginForm.register' | cxTranslate }}</a
@@ -28,6 +29,7 @@
 
     <ng-container *ngIf="loginAsGuest">
       <a
+        role="button"
         [routerLink]="{ cxRoute: 'checkoutLogin' } | cxUrl"
         class="btn btn-block btn-secondary btn-guest"
         >{{ 'loginForm.guestCheckout' | cxTranslate }}</a

feature-libs/user/profile/components/close-account/components/close-account/close-account.component.html

@@ -12,6 +12,7 @@
       </ng-container>
       <ng-container *cxFeature="'!a11yUseButtonsForBtnLinks'">
         <a
+          role="button"
           [routerLink]="{ cxRoute: 'home' } | cxUrl"
           class="btn btn-block btn-secondary"
           >{{ 'common.cancel' | cxTranslate }}</a

feature-libs/user/profile/components/forgot-password/forgot-password.component.html

@@ -38,6 +38,7 @@
   </ng-container>
   <ng-container *cxFeature="'!a11yUseButtonsForBtnLinks'">
     <a
+      role="button"
       class="btn btn-block btn-secondary"
       [routerLink]="{ cxRoute: 'login' } | cxUrl"
       >{{ 'common.cancel' | cxTranslate }}</a

feature-libs/user/profile/components/update-email/update-email.component.html

@@ -99,6 +99,7 @@
   </label>
 
   <a
+    role="button"
     class="btn btn-block btn-secondary"
     [routerLink]="{ cxRoute: 'home' } | cxUrl"
   >

feature-libs/user/profile/components/update-password/update-password.component.html

@@ -118,6 +118,7 @@
   </ng-container>
   <ng-container *cxFeature="'!a11yUseButtonsForBtnLinks'">
     <a
+      role="button"
       [routerLink]="{ cxRoute: 'home' } | cxUrl"
       class="btn btn-block btn-secondary"
       >{{ 'common.cancel' | cxTranslate }}</a

feature-libs/user/profile/components/update-profile/update-profile.component.html

@@ -118,6 +118,7 @@
   </ng-container>
   <ng-container *cxFeature="'!a11yUseButtonsForBtnLinks'">
     <a
+      role="button"
       [routerLink]="{ cxRoute: 'home' } | cxUrl"
       class="btn btn-block btn-secondary"
       >{{ 'common.cancel' | cxTranslate }}</a

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

@@ -576,6 +576,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;
+
   /**
    * In OCC cart requests, it puts parameters of a cart name and cart description
    * into a request body, instead of query params.
@@ -718,6 +724,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yDialogTriggerRefocus: false,
   a11yAddToWishlistFocus: false,
   a11ySearchBoxFocusOnEscape: false,
+  a11yItemCounterFocus: false,
   occCartNameAndDescriptionInHttpRequestBody: false,
   cmsBottomHeaderSlotUsingFlexStyles: false,
   useSiteThemeService: false,

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

@@ -375,6 +375,7 @@ if (environment.cpq) {
         a11yDialogTriggerRefocus: true,
         a11yAddToWishlistFocus: true,
         a11ySearchBoxFocusOnEscape: true,
+        a11yItemCounterFocus: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,
         useSiteThemeService: false,
         enableConsecutiveCharactersPasswordRequirement: true,

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

@@ -1,4 +1,16 @@
 <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"
@@ -23,6 +35,18 @@
   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"

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

@@ -85,6 +85,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],
 })