Merge branch 'develop' into feature/CXSPA-8668

SAP · Oct 18, 2024 · 883a05b · 883a05b
2 parents 09b9f12 + 1499ec5
commit 883a05b
Show file tree

Hide file tree

Showing 31 changed files with 1,095 additions and 131 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
@@ -305,9 +305,12 @@
                 <ng-container *ngIf="countries$ | async as countries">
                   <div *ngIf="countries.length !== 0">
                     <label>
-                      <span class="label-content required">{{
-                        'addressForm.country' | cxTranslate
-                      }}</span>
+                      <span class="label-content required">
+                        {{ 'addressForm.country' | cxTranslate }}
+                        <ng-template
+                          [ngTemplateOutlet]="requiredAsterisk"
+                        ></ng-template>
+                      </span>
                       <ng-select
                         [inputAttrs]="{ required: 'true' }"
                         [searchable]="true"
@@ -346,9 +349,12 @@
               </div>
               <div class="form-group">
                 <label>
-                  <span class="label-content required">{{
-                    'addressForm.firstName.label' | cxTranslate
-                  }}</span>
+                  <span class="label-content required">
+                    {{ 'addressForm.firstName.label' | cxTranslate }}
+                    <ng-template
+                      [ngTemplateOutlet]="requiredAsterisk"
+                    ></ng-template>
+                  </span>
                   <input
                     required="true"
                     class="form-control"
@@ -376,9 +382,12 @@
               </div>
               <div class="form-group">
                 <label>
-                  <span class="label-content required">{{
-                    'addressForm.lastName.label' | cxTranslate
-                  }}</span>
+                  <span class="label-content required">
+                    {{ 'addressForm.lastName.label' | cxTranslate }}
+                    <ng-template
+                      [ngTemplateOutlet]="requiredAsterisk"
+                    ></ng-template>
+                  </span>
                   <input
                     required="true"
                     type="text"
@@ -406,9 +415,12 @@
               </div>
               <div class="form-group">
                 <label>
-                  <span class="label-content required">{{
-                    'addressForm.address1' | cxTranslate
-                  }}</span>
+                  <span class="label-content required">
+                    {{ 'addressForm.address1' | cxTranslate }}
+                    <ng-template
+                      [ngTemplateOutlet]="requiredAsterisk"
+                    ></ng-template>
+                  </span>
                   <input
                     required="true"
                     type="text"
@@ -450,9 +462,12 @@
               <div class="row">
                 <div class="form-group col-md-6">
                   <label>
-                    <span class="label-content required">{{
-                      'addressForm.city.label' | cxTranslate
-                    }}</span>
+                    <span class="label-content required">
+                      {{ 'addressForm.city.label' | cxTranslate }}
+                      <ng-template
+                        [ngTemplateOutlet]="requiredAsterisk"
+                      ></ng-template>
+                    </span>
                     <input
                       required="true"
                       type="text"
@@ -480,9 +495,12 @@
                 </div>
                 <div class="form-group col-md-6">
                   <label>
-                    <span class="label-content required">{{
-                      'addressForm.zipCode.label' | cxTranslate
-                    }}</span>
+                    <span class="label-content required">
+                      {{ 'addressForm.zipCode.label' | cxTranslate }}
+                      <ng-template
+                        [ngTemplateOutlet]="requiredAsterisk"
+                      ></ng-template>
+                    </span>
                     <input
                       required="true"
                       type="text"
@@ -599,7 +617,9 @@
 <ng-template #requiredAsterisk>
   <abbr
     *cxFeature="'a11yRequiredAsterisks'"
+    aria-hidden="true"
     class="text-decoration-none"
+    aria-hidden="true"
     title="{{ 'common.required' | cxTranslate }}"
     >*</abbr
   >

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/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;
     }),