Merge branch 'develop' into chore/CXSPA-9320

feature-libs/product/image-zoom/styles/_product-image-zoom-view.scss

@@ -157,6 +157,7 @@ cx-product-image-zoom-view {
     .cx-image-container .cx-zoom-btn {
       background-color: var(--cx-color-dark);
       color: var(--cx-color-light);
+      --cx-color-visual-focus: #1f3a93;
     }
   }
 }

projects/assets/src/translations/en/common.json

@@ -27,6 +27,7 @@
     "loaded": "Loaded",
     "results": "Results",
     "of": "of",
+    "ngSelectDropdownOptionsList": "Options",
     "required": "required",
     "zoomIn": "Zoom in",
     "zoomOut": "Zoom out",

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

@@ -614,6 +614,12 @@ export interface FeatureTogglesInterface {
    */
   a11yNgSelectCloseDropdownOnEscape?: boolean;
 
+  /**
+   * 'NgSelectA11yDirective' will customize a ng-select dropdowns by setting custom
+   * ariaLabelDropdown ng-select attribute value to provided common.ngSelectDropdownOptionsList translation
+   */
+  a11yNgSelectAriaLabelDropdownCustomized?: boolean;
+
   /**
    * Removes duplicated error message from 'CancelOrderComponent'.
    */
@@ -1084,6 +1090,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yDeliveryModeRadiogroup: true,
   a11yNgSelectOptionsCount: false,
   a11yNgSelectCloseDropdownOnEscape: false,
+  a11yNgSelectAriaLabelDropdownCustomized: false,
   a11yRepeatedCancelOrderError: false,
   a11yAddedToCartActiveDialog: false,
   a11yNgSelectMobileReadout: true,

projects/storefrontapp-e2e-cypress/cypress/helpers/product-configurator-cart-cpq.ts

@@ -7,6 +7,7 @@
 import { navigation } from './navigation';
 import * as configurationCart from './product-configurator-cart';
 import Chainable = Cypress.Chainable;
+import { waitForPage } from './checkout-flow';
 
 const resolveIssuesLinkSelector =
   'cx-configure-cart-entry button.cx-action-link';
@@ -34,10 +35,11 @@ export function clickOnResolveIssuesLinkInCart(cartItemIndex: number): void {
  * Clicks on 'Proceed to Checkout' in the cart
  */
 export function clickOnProceedToCheckoutBtnInCart(): void {
+  const paymentTypeAlias = waitForPage('/checkout/payment-type', 'paymentType');
   cy.findByText(/proceed to checkout/i)
     .click()
     .then(() => {
-      cy.location('pathname').should('contain', '/checkout/payment-type');
+      cy.wait(`@${paymentTypeAlias}`);
       cy.get('.cx-payment-type-container').should('contain', 'Payment method');
       cy.get('cx-payment-type').should('be.visible');
     });
@@ -276,13 +278,15 @@ function checkTermsAndConditions(): void {
  */
 function reviewOrder(): void {
   cy.log("🛒 Navigate to the next step 'Review Order' tab");
+  const reviewOrderAlias = waitForPage('/checkout/review-order', 'reviewOrder');
+  cy.get('button.btn-primary').click();
   checkContinueBtnNotDisabled();
   cy.get('button.btn-primary')
     .contains('Continue')
     .click()
     .then(() => {
+      cy.wait(`@${reviewOrderAlias}`);
       cy.location('pathname').should('contain', '/checkout/review-order');
-      //cy.get('a.cx-link.active').contains('ReviewOrder');
       cy.get('cx-review-submit').should('be.visible');
       cy.get('.cx-review').should('be.visible');
       cy.get('.cx-review').should('contain', 'Review');
@@ -304,6 +308,7 @@ function placeOrder(): void {
     .wait(Cypress.config('defaultCommandTimeout'))
     .click()
     .then(() => {
+      cy.wait('@orderConfirmation');
       cy.location('pathname').should('contain', '/order-confirmation');
       cy.get('cx-breadcrumb').should('contain', 'Order Confirmation');
     });
@@ -453,4 +458,5 @@ export function verifyCartCount(expectedCount: number) {
 function defineB2BCheckoutAlias() {
   cy.intercept('GET', '**delivery-address*').as('deliveryAddress');
   cy.intercept('PUT', '**/deliverymode*').as('deliveryMode');
+  cy.intercept('POST', '**/orders*').as('orderConfirmation');
 }

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

@@ -389,6 +389,7 @@ if (environment.cpq) {
          */
         a11yNgSelectOptionsCount: false,
         a11yNgSelectCloseDropdownOnEscape: true,
+        a11yNgSelectAriaLabelDropdownCustomized: true,
         a11yRepeatedCancelOrderError: true,
         a11yAddedToCartActiveDialog: true,
         a11yNgSelectMobileReadout: true,

projects/storefrontlib/shared/components/ng-select-a11y/ng-select-a11y.directive.ts

@@ -41,10 +41,6 @@ export class NgSelectA11yDirective implements AfterViewInit {
    */
   @Input() cxNgSelectA11y: { ariaLabel?: string; ariaControls?: string };
 
-  //TODO: CXSPA-9005: Remove this property in next major release
-  /**
-   * @deprecated since 2211.33
-   */
   protected translationService = inject(TranslationService);
   protected domSanitizer = inject(DomSanitizer);
   protected selectComponent = inject(NgSelectComponent);
@@ -105,6 +101,13 @@ export class NgSelectA11yDirective implements AfterViewInit {
 
     this.renderer.setAttribute(inputCombobox, 'role', 'combobox');
     this.renderer.setAttribute(inputCombobox, 'aria-expanded', 'false');
+    if (
+      this.featureConfigService?.isEnabled(
+        'a11yNgSelectAriaLabelDropdownCustomized'
+      )
+    ) {
+      this.customizeNgSelectAriaLabelDropdown();
+    }
 
     const isOpened$ = this.selectComponent.openEvent.pipe(map(() => 'true'));
     const isClosed$ = this.selectComponent.closeEvent.pipe(map(() => 'false'));
@@ -202,4 +205,13 @@ export class NgSelectA11yDirective implements AfterViewInit {
     }
     observer.disconnect();
   }
+
+  customizeNgSelectAriaLabelDropdown() {
+    this.translationService
+      .translate('common.ngSelectDropdownOptionsList')
+      .pipe(take(1))
+      .subscribe((translation) => {
+        this.selectComponent.ariaLabelDropdown = translation;
+      });
+  }
 }

tools/schematics/testing.ts

@@ -84,6 +84,20 @@ const commands = [
 ] as const;
 type Command = (typeof commands)[number];
 
+const isVoiceNotifyEnabled = process.argv.includes('--voice-notify');
+if (isVoiceNotifyEnabled) {
+  console.log('Voice notifications enabled');
+}
+function voiceAlert(message: string): void {
+  if (isVoiceNotifyEnabled) {
+    try {
+      execSync(`say "${message}"`);
+    } catch (error) {
+      console.warn('Voice notification failed:', error);
+    }
+  }
+}
+
 const buildLibRegEx = new RegExp('build (.*?)/schematics');
 const verdaccioRegistryUrl = 'http://localhost:4873/';
 const originalRegistryUrl = execSync('npm config get @spartacus:registry')
@@ -204,9 +218,11 @@ async function executeCommand(command: Command): Promise<void> {
   switch (command) {
     case 'publish':
       publishLibs();
+      voiceAlert('Publishing completed');
       break;
     case 'build projects/schematics':
       buildSchematics({ publish: true });
+      voiceAlert('Schematics build completed');
       break;
     case 'build asm/schematics':
     case 'build cart/schematics':
@@ -240,12 +256,15 @@ async function executeCommand(command: Command): Promise<void> {
       const lib =
         buildLibRegEx.exec(command)?.pop() ?? 'LIB-REGEX-DOES-NOT-MATCH';
       buildSchematicsAndPublish(`npm run build:${lib}`);
+      voiceAlert(`Schematics build of lib ${lib} completed`);
       break;
     case 'build all libs':
       buildLibs();
+      voiceAlert('All libraries build completed');
       break;
     case 'test all schematics':
       testAllSchematics();
+      voiceAlert('All schematics tests completed');
       break;
     case 'exit':
       beforeExit();