CXSPA/9197: Remove unused method in major release

.github/workflows/ci.yml

@@ -225,7 +225,7 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - name: Setup node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ env.NODE_VERSION }}
       - name: Cache node_modules
@@ -277,7 +277,7 @@ jobs:
       - name: Notify the slack channel of when build conclusion failed
         env:
           SLACK_BOT_TOKEN: ${{ secrets.SLACK_TOKEN }}
-        uses: slackapi/slack-github-action@v1.27.0
+        uses: slackapi/slack-github-action@v1.27.1
         with:
           channel-id: ${{ secrets.SLACK_NOTIFICATION_CHANNEL }}
           payload: |

core-libs/setup/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartacus/setup",
-  "version": "2211.32.0-1",
+  "version": "2211.32.0",
   "description": "Includes features that makes Spartacus and it's setup easier and streamlined.",
   "keywords": [
     "spartacus",
@@ -16,7 +16,7 @@
     "test": "../../node_modules/.bin/jest --config ./jest.config.js"
   },
   "dependencies": {
-    "tslib": "^2.6.2"
+    "tslib": "^2.8.1"
   },
   "peerDependencies": {
     "@angular/core": "^18.2.9",

feature-libs/asm/components/csagent-login-form/csagent-login-form.component.ts

@@ -26,7 +26,7 @@ export class CSAgentLoginFormComponent implements OnInit {
   submitEvent = new EventEmitter<{ userId: string; password: string }>();
 
   constructor(protected fb: UntypedFormBuilder) {
-    useFeatureStyles('a11yPasswordVisibilityBtnValueOverflow');
+    useFeatureStyles('a11yPasswordVisibliltyBtnValueOverflow');
     useFeatureStyles('a11yTextSpacingAdjustments');
   }
 

feature-libs/asm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartacus/asm",
-  "version": "2211.32.0-1",
+  "version": "2211.32.0",
   "description": "ASM feature library for Spartacus",
   "keywords": [
     "spartacus",
@@ -22,7 +22,7 @@
     "test:schematics": "npm --prefix ../../projects/schematics/ run clean && npm run clean:schematics && ../../node_modules/.bin/jest --config ./jest.schematics.config.js"
   },
   "dependencies": {
-    "tslib": "^2.6.2"
+    "tslib": "^2.8.1"
   },
   "peerDependencies": {
     "@angular-devkit/schematics": "^18.2.9",

feature-libs/cart/base/components/mini-cart/mini-cart.component.ts

@@ -6,6 +6,7 @@
 
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { ICON_TYPE } from '@spartacus/storefront';
+import { useFeatureStyles } from '@spartacus/core';
 import { Observable } from 'rxjs';
 import { MiniCartComponentService } from './mini-cart-component.service';
 
@@ -21,5 +22,7 @@ export class MiniCartComponent {
 
   total$: Observable<string> = this.miniCartComponentService.getTotalPrice();
 
-  constructor(protected miniCartComponentService: MiniCartComponentService) {}
+  constructor(protected miniCartComponentService: MiniCartComponentService) {
+    useFeatureStyles('a11yMiniCartFocusOnMobile');
+  }
 }

feature-libs/cart/base/styles/components/_mini-cart.scss

@@ -51,6 +51,18 @@
     }
   }
 
+  @include forFeature('a11yMiniCartFocusOnMobile') {
+    @include media-breakpoint-down(md) {
+      a {
+        &:focus {
+          outline-offset: -4px;
+          outline-color: var(--cx-color-inverse);
+          box-shadow: 0 0 0 2px var(--cx-color-visual-focus) inset;
+        }
+      }
+    }
+  }
+
   @mixin native-high-contrast-fix {
     @media (forced-colors: active) {
       a {

feature-libs/cart/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spartacus/cart",
-  "version": "2211.32.0-1",
+  "version": "2211.32.0",
   "description": "",
   "keywords": [
     "spartacus",
@@ -26,7 +26,7 @@
     "test:schematics": "npm --prefix ../../projects/schematics/ run clean && npm run clean:schematics && ../../node_modules/.bin/jest --config ./jest.schematics.config.js"
   },
   "dependencies": {
-    "tslib": "^2.6.2"
+    "tslib": "^2.8.1"
   },
   "peerDependencies": {
     "@angular-devkit/schematics": "^18.2.9",

feature-libs/cart/quick-order/components/quick-order/form/quick-order-form.component.html

@@ -71,6 +71,7 @@
         class="quick-order-results-product-container"
       >
         <button
+          *cxFeature="'!a11yQuickOrderSearchListKeyboardNavigation'"
           (blur)="onBlur($event)"
           (mousedown)="add(product, $event)"
           (keydown.arrowdown)="focusNextChild($event)"
@@ -103,6 +104,42 @@
           </span>
           <span class="price">{{ product.price?.formattedValue }}</span>
         </button>
+        <button
+          *cxFeature="'a11yQuickOrderSearchListKeyboardNavigation'"
+          (blur)="onBlur($event)"
+          (mousedown)="add(product, $event)"
+          (keydown.arrowdown)="focusNextChild($event)"
+          (keydown.arrowup)="focusPreviousChild($event)"
+          (keydown.enter)="add(product, $event)"
+          (keydown.escape)="clear($event)"
+          (keydown.tab)="close()"
+          (keydown.shift.tab)="close()"
+          [class.has-media]="
+            config?.quickOrder?.searchForm?.displayProductImages
+          "
+          class="quick-order-results-product"
+          role="option"
+        >
+          <cx-media
+            *ngIf="config?.quickOrder?.searchForm?.displayProductImages"
+            [alt]="product.name"
+            [container]="product.images?.PRIMARY"
+            class="media"
+            format="thumbnail"
+            role="presentation"
+          ></cx-media>
+          <div class="name" [innerHTML]="product.name"></div>
+          <span class="id">
+            {{
+              'quickOrderForm.id'
+                | cxTranslate
+                  : {
+                      id: product.code,
+                    }
+            }}
+          </span>
+          <span class="price">{{ product.price?.formattedValue }}</span>
+        </button>
       </li>
     </ul>
 

feature-libs/cart/quick-order/components/quick-order/form/quick-order-form.component.spec.ts

@@ -7,6 +7,7 @@ import {
   QuickOrderFacade,
 } from '@spartacus/cart/quick-order/root';
 import {
+  FeatureConfigService,
   FeaturesConfig,
   GlobalMessageService,
   GlobalMessageType,
@@ -64,6 +65,12 @@ class MockGlobalMessageService implements Partial<GlobalMessageService> {
   ): void {}
 }
 
+class MockFeatureConfigService {
+  isEnabled() {
+    return true;
+  }
+}
+
 @Component({
   selector: 'cx-icon',
   template: '',
@@ -101,6 +108,7 @@ describe('QuickOrderFormComponent', () => {
             features: { level: '5.1' },
           },
         },
+        { provide: FeatureConfigService, useClass: MockFeatureConfigService },
       ],
     }).compileComponents();
 
@@ -214,6 +222,20 @@ describe('QuickOrderFormComponent', () => {
       component.clear(ev as Event);
       expect(ev.preventDefault).toHaveBeenCalled();
     });
+
+    it('sets focus back to the input if results box was open', (done) => {
+      const inputSearch: HTMLElement = fixture.debugElement.query(
+        By.css('input')
+      ).nativeElement;
+
+      component.open();
+      expect(inputSearch).not.toBe(getFocusedElement());
+      component.clear();
+      requestAnimationFrame(() => {
+        expect(inputSearch).toBe(getFocusedElement());
+        done();
+      });
+    });
   });
 
   it('should not change focus on focusNextChild if results list is empty', () => {

feature-libs/cart/quick-order/components/quick-order/form/quick-order-form.component.ts

@@ -9,14 +9,21 @@ import {
   ChangeDetectorRef,
   Component,
   ElementRef,
+  inject,
   Input,
   OnDestroy,
   OnInit,
   ViewChild,
 } from '@angular/core';
 import { UntypedFormControl, UntypedFormGroup } from '@angular/forms';
 import { QuickOrderFacade } from '@spartacus/cart/quick-order/root';
-import { Config, Product, WindowRef, useFeatureStyles } from '@spartacus/core';
+import {
+  Config,
+  FeatureConfigService,
+  Product,
+  useFeatureStyles,
+  WindowRef,
+} from '@spartacus/core';
 import { ICON_TYPE } from '@spartacus/storefront';
 import { Observable, Subscription } from 'rxjs';
 import {
@@ -45,6 +52,7 @@ export class QuickOrderFormComponent implements OnInit, OnDestroy {
 
   @ViewChild('quickOrderInput') quickOrderInput: ElementRef;
 
+  private featureConfigService = inject(FeatureConfigService);
   protected subscription = new Subscription();
   protected searchSubscription = new Subscription();
 
@@ -78,6 +86,15 @@ export class QuickOrderFormComponent implements OnInit, OnDestroy {
 
     if (this.isResultsBoxOpen()) {
       this.toggleBodyClass(SEARCH_BOX_ACTIVE_CLASS, false);
+      if (
+        this.featureConfigService.isEnabled(
+          'a11yQuickOrderSearchBoxRefocusOnClose'
+        )
+      ) {
+        requestAnimationFrame(() => {
+          this.quickOrderInput.nativeElement.focus();
+        });
+      }
     }
 
     const product = this.form.get('product')?.value;
@@ -140,6 +157,15 @@ export class QuickOrderFormComponent implements OnInit, OnDestroy {
 
     // Focus on first index moving to last
     if (results.length) {
+      if (
+        this.featureConfigService.isEnabled(
+          'a11ySearchableDropdownFirstElementFocus'
+        )
+      ) {
+        this.winRef.document
+          .querySelector('main')
+          ?.classList.remove('mouse-focus');
+      }
       if (focusedIndex >= results.length - 1) {
         results[0].focus();
       } else {

feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.spec.ts

@@ -1,5 +1,11 @@
 import { ChangeDetectionStrategy, Component, Input, Type } from '@angular/core';
-import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import {
+  ComponentFixture,
+  fakeAsync,
+  TestBed,
+  tick,
+  waitForAsync,
+} from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { ActivatedRoute } from '@angular/router';
 import { ActiveCartFacade } from '@spartacus/cart/base/root';
@@ -547,4 +553,25 @@ describe('CheckoutDeliveryAddressComponent', () => {
       expect(getSpinner()).toBeFalsy();
     });
   });
+
+  describe('focusCardAfterSelecting', () => {
+    it('should refocus the selected card after updating', fakeAsync(() => {
+      const card = document.createElement('cx-card');
+      const selectButton = document.createElement('button');
+      card.appendChild(selectButton);
+      card.tabIndex = 0;
+      document.body.appendChild(card);
+      selectButton.focus();
+      component['isUpdating$'] = of(false);
+      spyOn(card, 'focus');
+      spyOn(component['focusService'], 'findFirstFocusable').and.returnValue(
+        card
+      );
+
+      component.focusCardAfterSelecting();
+      tick(16); // Wait for requestAnimationFrame
+
+      expect(card.focus).toHaveBeenCalled();
+    }));
+  });
 });

feature-libs/checkout/base/components/checkout-delivery-address/checkout-delivery-address.component.ts

@@ -24,15 +24,21 @@ import {
   GlobalMessageType,
   TranslationService,
   UserAddressService,
+  WindowRef,
   getLastValueSync,
 } from '@spartacus/core';
-import { Card, getAddressNumbers } from '@spartacus/storefront';
+import {
+  Card,
+  SelectFocusUtility,
+  getAddressNumbers,
+} from '@spartacus/storefront';
 import { BehaviorSubject, Observable, combineLatest } from 'rxjs';
 import {
   distinctUntilChanged,
   filter,
   map,
   switchMap,
+  take,
   tap,
 } from 'rxjs/operators';
 import { CheckoutConfigService } from '../services';
@@ -79,6 +85,9 @@ export class CheckoutDeliveryAddressComponent implements OnInit {
     );
   }
 
+  @Optional() protected focusService = inject(SelectFocusUtility);
+  @Optional() protected windowRef = inject(WindowRef);
+
   constructor(
     protected userAddressService: UserAddressService,
     protected checkoutDeliveryAddressFacade: CheckoutDeliveryAddressFacade,
@@ -155,6 +164,38 @@ export class CheckoutDeliveryAddressComponent implements OnInit {
     );
 
     this.setAddress(address);
+    if (this.featureConfigService?.isEnabled('a11yFocusOnCardAfterSelecting')) {
+      this.focusCardAfterSelecting();
+    }
+  }
+
+  /**
+   * Restores the focus to the Card component after it has been selected and the checkout has finished updating.
+   * The focus is lost due to DOM changes making it otherwise impossible to target elements that have been removed.
+   */
+  focusCardAfterSelecting(): void {
+    const cardNodes = Array.from(
+      this.windowRef?.document.querySelectorAll('cx-card')
+    );
+    const triggeredCard =
+      this.windowRef?.document.activeElement?.closest('cx-card');
+
+    if (triggeredCard) {
+      const selectedCardIndex = cardNodes.indexOf(triggeredCard);
+      this.isUpdating$
+        .pipe(
+          filter((isUpdating) => !isUpdating),
+          take(1)
+        )
+        .subscribe(() => {
+          requestAnimationFrame(() => {
+            const selectedCard = this.windowRef?.document.querySelectorAll(
+              'cx-card'
+            )[selectedCardIndex] as HTMLElement;
+            this.focusService.findFirstFocusable(selectedCard)?.focus();
+          });
+        });
+    }
   }
 
   addAddress(address: Address | undefined): void {