Merge branch 'develop' into feature/CXSPA-7931

SAP · Oct 18, 2024 · dea2c55 · dea2c55
2 parents bef7353 + 96d44a9
commit dea2c55
Show file tree

Hide file tree

Showing 32 changed files with 1,075 additions and 120 deletions.
diff --git a/feature-libs/cart/base/components/cart-coupon/cart-coupon.component.html b/feature-libs/cart/base/components/cart-coupon/cart-coupon.component.html
@@ -22,6 +22,7 @@
         >
           <abbr
             *cxFeature="'a11yRequiredAsterisks'"
+            aria-hidden="true"
             class="text-decoration-none"
             title="{{ 'common.required' | cxTranslate }}"
             >*</abbr

diff --git a/...bs/cart/quick-order/components/cart-quick-order-form/cart-quick-order-form.component.html b/...bs/cart/quick-order/components/cart-quick-order-form/cart-quick-order-form.component.html
@@ -17,6 +17,7 @@
               <!-- TODO: (CXSPA-5953) Remove feature flags next major -->
               <abbr
                 *cxFeature="'a11yRequiredAsterisks'"
+                aria-hidden="true"
                 class="text-decoration-none"
                 title="{{ 'common.required' | cxTranslate }}"
                 >*</abbr

diff --git a/...s/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html b/...s/cart/saved-cart/components/saved-cart-form-dialog/saved-cart-form-dialog.component.html
@@ -223,6 +223,7 @@
                   >{{ 'savedCartDialog.savedCartName' | cxTranslate }}
                   <abbr
                     *cxFeature="'a11yRequiredAsterisks'"
+                    aria-hidden="true"
                     class="text-decoration-none"
                     title="{{ 'common.required' | cxTranslate }}"
                     >*</abbr

diff --git a/...onents/checkout-payment-method/checkout-payment-form/checkout-payment-form.component.html b/...onents/checkout-payment-method/checkout-payment-form/checkout-payment-form.component.html
@@ -617,6 +617,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"

diff --git a/...re-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html b/...re-libs/checkout/base/components/checkout-place-order/checkout-place-order.component.html
@@ -19,6 +19,7 @@
         </a>
         <abbr
           *cxFeature="'a11yRequiredAsterisks'"
+          aria-hidden="true"
           class="text-decoration-none"
           title="{{ 'common.required' | cxTranslate }}"
           >*</abbr

diff --git a/...onents/overview-bundle-attribute/configurator-overview-bundle-attribute.component.spec.ts b/...onents/overview-bundle-attribute/configurator-overview-bundle-attribute.component.spec.ts
@@ -2,6 +2,7 @@ import { Component, Input, Pipe, PipeTransform } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import {
+  FeatureConfigService,
   I18nTestingModule,
   ImageType,
   Product,
@@ -64,6 +65,7 @@ describe('ConfiguratorOverviewBundleAttributeComponent', () => {
   let component: ConfiguratorOverviewBundleAttributeComponent;
   let fixture: ComponentFixture<ConfiguratorOverviewBundleAttributeComponent>;
   let htmlElem: HTMLElement;
+  let featureConfigService: FeatureConfigService;
 
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
@@ -73,7 +75,10 @@ describe('ConfiguratorOverviewBundleAttributeComponent', () => {
         MockConfiguratorPriceComponent,
         MockNumericPipe,
       ],
-      providers: [{ provide: ProductService, useClass: MockProductService }],
+      providers: [
+        { provide: ProductService, useClass: MockProductService },
+        FeatureConfigService,
+      ],
     }).compileComponents();
   }));
 
@@ -83,6 +88,7 @@ describe('ConfiguratorOverviewBundleAttributeComponent', () => {
     );
     component = fixture.componentInstance;
     htmlElem = fixture.nativeElement;
+    featureConfigService = TestBed.inject(FeatureConfigService);
   });
 
   beforeEach(() => {
@@ -142,6 +148,8 @@ describe('ConfiguratorOverviewBundleAttributeComponent', () => {
 
     describe('product image', () => {
       it('should be visible if primary', () => {
+        spyOn(featureConfigService, 'isEnabled').and.returnValue(true);
+
         product$.next(mockProduct);
 
         fixture.detectChanges();

diff --git a/feature-libs/user/account/components/login-form/login-form.component.html b/feature-libs/user/account/components/login-form/login-form.component.html
@@ -2,9 +2,13 @@
 
 <form (ngSubmit)="onSubmit()" [formGroup]="form">
   <!-- TODO: (CXSPA-5953) Remove feature flags next major -->
+  <p *cxFeature="'a11yRequiredAsterisks'" class="form-legend">
+    {{ 'formLegend.required' | cxTranslate }}
+  </p>
   <label>
     <span class="label-content">
       {{ 'loginForm.emailAddress.label' | cxTranslate }}
+      <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template>
     </span>
     <input
       required="true"
@@ -32,6 +36,7 @@
   <label>
     <span class="label-content">
       {{ 'loginForm.password.label' | cxTranslate }}
+      <ng-template [ngTemplateOutlet]="requiredAsterisk"></ng-template>
     </span>
     <input
       required="true"
@@ -75,6 +80,7 @@
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
     class="text-decoration-none"
+    aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr
   >

diff --git a/feature-libs/user/account/components/otp-login-form/otp-login-form.component.html b/feature-libs/user/account/components/otp-login-form/otp-login-form.component.html
@@ -53,6 +53,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

diff --git a/feature-libs/user/profile/components/address-book/address-form/address-form.component.html b/feature-libs/user/profile/components/address-book/address-form/address-form.component.html
@@ -313,6 +313,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

diff --git a/feature-libs/user/profile/components/forgot-password/forgot-password.component.html b/feature-libs/user/profile/components/forgot-password/forgot-password.component.html
@@ -1,9 +1,19 @@
 <cx-spinner class="overlay" *ngIf="isUpdating$ | async"> </cx-spinner>
 <!-- TODO: (CXSPA-5953) Remove feature flags next major -->
+<p *cxFeature="'a11yRequiredAsterisks'" class="form-legend">
+  {{ 'formLegend.required' | cxTranslate }}
+</p>
 <form (ngSubmit)="onSubmit()" [formGroup]="form">
   <label>
     <span class="label-content"
       >{{ 'forgottenPassword.emailAddress.label' | cxTranslate }}
+      <abbr
+        *cxFeature="'a11yRequiredAsterisks'"
+        aria-hidden="true"
+        class="text-decoration-none"
+        title="{{ 'common.required' | cxTranslate }}"
+        >*</abbr
+      >
     </span>
     <input
       required="true"

diff --git a/feature-libs/user/profile/components/register/register.component.html b/feature-libs/user/profile/components/register/register.component.html
@@ -318,6 +318,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

diff --git a/feature-libs/user/profile/components/update-email/update-email.component.html b/feature-libs/user/profile/components/update-email/update-email.component.html
@@ -114,6 +114,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

diff --git a/feature-libs/user/profile/components/update-password/update-password.component.html b/feature-libs/user/profile/components/update-password/update-password.component.html
@@ -133,6 +133,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

diff --git a/feature-libs/user/profile/components/update-profile/update-profile.component.html b/feature-libs/user/profile/components/update-profile/update-profile.component.html
@@ -133,6 +133,7 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr

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
@@ -638,6 +638,35 @@ export interface FeatureTogglesInterface {
    *       in the future together with this feature toggle.
    */
   allPageMetaResolversEnabledInCsr?: boolean;
+
+  /**
+   * When enabled, allows to provide extended formats and media queries for <picture> element if used in MediaComponent.
+   *
+   * Important: After activation default HTML element in MediaComponent will be `<img>`
+   * Only BannerComponent has passed `'picture'` value. If you need to use `<picture>` HTML element
+   * you need to pass `[elementType]="'picture'"` to `<cx-media>`
+   *
+   * For proper work requires `pictureElementFormats`  provided in media config:
+   *  ```ts
+   * provideConfig({
+   *   pictureElementFormats: {
+   *    mediaQueries: {
+   *     'max-width': '767px',
+   *      ...
+   *    },
+   *    width: 50,
+   *    height: 50,
+   *   },
+   * })
+   * ```
+   *
+   * After activating this toggle, new inputs in `MediaComponent` — specifically
+   * `width`, `height`, and `sizes` — will be passed to the template as HTML attributes.
+   *
+   * Toggle activates `@Input() elementType: 'img' | 'picture' = 'img'` in `MediaComponent`
+   *
+   */
+  useExtendedMediaComponentConfiguration?: boolean;
 }
 
 export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
@@ -738,4 +767,5 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   enableConsecutiveCharactersPasswordRequirement: false,
   enablePasswordsCannotMatchInPasswordUpdateForm: false,
   allPageMetaResolversEnabledInCsr: false,
+  useExtendedMediaComponentConfiguration: false,
 };
diff --git a/projects/storefrontapp-e2e-cypress/cypress/helpers/checkout-multi-dimensional.ts b/projects/storefrontapp-e2e-cypress/cypress/helpers/checkout-multi-dimensional.ts
@@ -4,20 +4,20 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { assertAddressForm } from './address-book';
-import { login } from './auth-forms';
-import * as guestCheckout from './checkout-as-guest';
-import * as checkout from './checkout-flow';
-import { validateUpdateProfileForm } from './update-profile';
+import { getSampleUser } from '../sample-data/checkout-flow';
 import {
   cartWithMultipleVariantProducts,
   cartWithTotalVariantProduct,
   multiDBaseProduct,
   multiDProduct,
 } from '../sample-data/multi-dimensional-flow';
-import { getSampleUser } from '../sample-data/checkout-flow';
-import { searchForProduct } from './product-search';
+import { assertAddressForm } from './address-book';
 import { addProductToCart } from './applied-promotions';
+import { login } from './auth-forms';
+import * as guestCheckout from './checkout-as-guest';
+import * as checkout from './checkout-flow';
+import { searchForProduct } from './product-search';
+import { validateUpdateProfileForm } from './update-profile';
 
 export function testCheckoutMultiDAsGuest() {
   it('should perform checkout as guest, create an account and verify guest data', () => {
@@ -160,9 +160,19 @@ export function testCheckoutMultiDAsGuestAndVerifyCart() {
     cy.findByText(/Sign in \/ Register/i).click();
     cy.wait(`@${loginPage}`).its('response.statusCode').should('eq', 200);
 
+    cy.intercept(
+      'GET',
+      `${Cypress.env('OCC_PREFIX')}/${Cypress.env(
+        'BASE_SITE'
+      )}/users/current/carts?fields*`
+    ).as('carts');
+
     login(multiDUser.email, multiDUser.password);
 
     cy.get('cx-login div.cx-login-greet').should('exist');
+
+    cy.wait('@carts').its('response.statusCode').should('eq', 200);
+
     cy.get('cx-mini-cart .count').contains('1');
 
     const cartPage = checkout.waitForPage('/cart', 'getCartPage');

diff --git a/projects/storefrontapp-e2e-cypress/cypress/helpers/notification.ts b/projects/storefrontapp-e2e-cypress/cypress/helpers/notification.ts
@@ -283,7 +283,7 @@ export function navigateToPDPInCustomerInterest(productCode: string) {
   cy.get('.cx-product-interests-product-item').within(() => {
     cy.get('.cx-code').should('contain', productCode);
     cy.get(
-      '.cx-product-interests-product-image-link > .is-initialized > picture'
+      '.cx-product-interests-product-image-link > .is-initialized > img'
     ).click();
   });
 }

diff --git a/projects/storefrontapp/src/app/app.module.ts b/projects/storefrontapp/src/app/app.module.ts
@@ -22,17 +22,13 @@ import { translationChunksConfig, translations } from '@spartacus/assets';
 import {
   I18nConfig,
   OccConfig,
-  provideConfig,
   RoutingConfig,
   TestConfigModule,
+  provideConfig,
 } from '@spartacus/core';
 import { StoreFinderConfig } from '@spartacus/storefinder/core';
 import { GOOGLE_MAPS_DEVELOPMENT_KEY_CONFIG } from '@spartacus/storefinder/root';
-import {
-  AppRoutingModule,
-  StorefrontComponent,
-  USE_LEGACY_MEDIA_COMPONENT,
-} from '@spartacus/storefront';
+import { AppRoutingModule, StorefrontComponent } from '@spartacus/storefront';
 import { environment } from '../environments/environment';
 import { TestOutletModule } from '../test-outlets/test-outlet.module';
 import { SpartacusModule } from './spartacus/spartacus.module';
@@ -94,10 +90,6 @@ if (!environment.production) {
       // without a key, for development or demo purposes.
       googleMaps: { apiKey: GOOGLE_MAPS_DEVELOPMENT_KEY_CONFIG },
     }),
-    {
-      provide: USE_LEGACY_MEDIA_COMPONENT,
-      useValue: false,
-    },
   ],
   bootstrap: [StorefrontComponent],
 })

diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -382,6 +382,7 @@ if (environment.cpq) {
         enableConsecutiveCharactersPasswordRequirement: true,
         enablePasswordsCannotMatchInPasswordUpdateForm: true,
         allPageMetaResolversEnabledInCsr: true,
+        useExtendedMediaComponentConfiguration: true,
       };
       return appFeatureToggles;
     }),

diff --git a/projects/storefrontlib/cms-components/content/banner/banner.component.html b/projects/storefrontlib/cms-components/content/banner/banner.component.html
@@ -10,7 +10,15 @@
       >
       </cx-generic-link>
       <p class="headline" *ngIf="data.headline" [innerHTML]="data.headline"></p>
-      <cx-media [container]="getImage(data)"></cx-media>
+      <cx-media
+        *cxFeature="'useExtendedMediaComponentConfiguration'"
+        [container]="getImage(data)"
+        [elementType]="'picture'"
+      ></cx-media>
+      <cx-media
+        *cxFeature="'!useExtendedMediaComponentConfiguration'"
+        [container]="getImage(data)"
+      ></cx-media>
       <p class="content" *ngIf="data.content" [innerHTML]="data.content"></p>
     </ng-container>
   </ng-container>
@@ -21,14 +29,30 @@
       [target]="getTarget(data)"
     >
       <p class="headline" *ngIf="data.headline" [innerHTML]="data.headline"></p>
-      <cx-media [container]="getImage(data)"></cx-media>
+      <cx-media
+        *cxFeature="'useExtendedMediaComponentConfiguration'"
+        [container]="getImage(data)"
+        [elementType]="'picture'"
+      ></cx-media>
+      <cx-media
+        *cxFeature="'!useExtendedMediaComponentConfiguration'"
+        [container]="getImage(data)"
+      ></cx-media>
       <p class="content" *ngIf="data.content" [innerHTML]="data.content"></p>
     </cx-generic-link>
   </ng-container>
   <ng-container *ngIf="!routerLink">
     <div class="no-link">
       <p class="headline" *ngIf="data.headline" [innerHTML]="data.headline"></p>
-      <cx-media [container]="getImage(data)"></cx-media>
+      <cx-media
+        *cxFeature="'useExtendedMediaComponentConfiguration'"
+        [container]="getImage(data)"
+        [elementType]="'picture'"
+      ></cx-media>
+      <cx-media
+        *cxFeature="'!useExtendedMediaComponentConfiguration'"
+        [container]="getImage(data)"
+      ></cx-media>
       <p class="content" *ngIf="data.content" [innerHTML]="data.content"></p>
     </div>
   </ng-container>

diff --git a/projects/storefrontlib/cms-components/content/banner/banner.component.spec.ts b/projects/storefrontlib/cms-components/content/banner/banner.component.spec.ts
@@ -12,6 +12,7 @@ import {
   SemanticPathService,
   UrlCommand,
 } from '@spartacus/core';
+import { MockFeatureDirective } from 'projects/storefrontlib/shared/test/mock-feature-directive';
 import { BehaviorSubject, Observable, of } from 'rxjs';
 import { CmsComponentData } from '../../../cms-structure/page/model/cms-component-data';
 import { GenericLinkComponent } from '../../../shared/components/generic-link/generic-link.component';
@@ -81,7 +82,12 @@ describe('BannerComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [RouterTestingModule, FeaturesConfigModule],
-      declarations: [BannerComponent, MockMediaComponent, GenericLinkComponent],
+      declarations: [
+        BannerComponent,
+        MockMediaComponent,
+        GenericLinkComponent,
+        MockFeatureDirective,
+      ],
       providers: [
         {
           provide: CmsComponentData,