Merge branch 'develop' into hotfix/CXSPA-1128

SAP · Oct 18, 2024 · 96ce03e · 96ce03e
2 parents 3101cc3 + 1499ec5
commit 96ce03e
Show file tree

Hide file tree

Showing 43 changed files with 1,151 additions and 159 deletions.
diff --git a/feature-libs/cart/base/components/add-to-cart/add-to-cart.component.html b/feature-libs/cart/base/components/add-to-cart/add-to-cart.component.html
@@ -6,9 +6,10 @@
         *ngIf="hasStock"
         [max]="maxQuantity"
         [control]="addToCartForm.get('quantity')"
+        [ariaDescribedById]="'add-to-card-stock-info'"
       ></cx-item-counter>
 
-      <span class="info">
+      <span class="info" id="add-to-card-stock-info">
         <span *ngIf="showInventory$ | async">{{ getInventory() }}</span>
         {{
           hasStock

diff --git a/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.html b/feature-libs/cart/base/components/added-to-cart-dialog/added-to-cart-dialog.component.html
@@ -25,6 +25,7 @@
       <button
         type="button"
         class="close"
+        title="{{ 'common.close' | cxTranslate }}"
         attr.aria-label="{{ 'addToCart.closeModal' | cxTranslate }}"
         (click)="dismissModal('Cross click')"
       >

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/feature-libs/pickup-in-store/assets/translations/en/pickupInStore.json b/feature-libs/pickup-in-store/assets/translations/en/pickupInStore.json
@@ -36,7 +36,7 @@
     "findAStore": "Find a Store",
     "findStores": "Find Stores",
     "hideOutOfStockOptions": "Hide out of stock options",
-    "searchPlaceholder": "Enter Zip Code, Town or Address",
+    "searchPlaceholder": "Enter Zip Code or Town or Address",
     "useMyLocation": "Use my location"
   },
   "addressBookPickupInStore": {

diff --git a/...s/pickup-in-store/components/container/my-preferred-store/my-preferred-store.component.ts b/...s/pickup-in-store/components/container/my-preferred-store/my-preferred-store.component.ts
@@ -10,6 +10,7 @@ import {
   Page,
   PointOfService,
   RoutingService,
+  useFeatureStyles,
 } from '@spartacus/core';
 import {
   PickupLocationsSearchFacade,
@@ -66,6 +67,8 @@ export class MyPreferredStoreComponent implements OnInit {
         this.pointOfService = store;
       })
     );
+
+    useFeatureStyles('a11yViewHoursButtonIconContrast');
   }
 
   ngOnInit(): void {

diff --git a/feature-libs/pickup-in-store/components/presentational/store/store.component.ts b/feature-libs/pickup-in-store/components/presentational/store/store.component.ts
@@ -31,6 +31,7 @@ export class StoreComponent implements OnInit {
 
   constructor() {
     useFeatureStyles('a11yVisibleFocusOverflows');
+    useFeatureStyles('a11yViewHoursButtonIconContrast');
   }
 
   ngOnInit(): void {

diff --git a/feature-libs/pickup-in-store/styles/_my-preferred-store.scss b/feature-libs/pickup-in-store/styles/_my-preferred-store.scss
@@ -10,6 +10,9 @@
     .cx-store-opening-hours-icon {
       color: var(--cx-color-secondary);
       opacity: var(--cx-opacity, 0.5);
+      @include forFeature('a11yViewHoursButtonIconContrast') {
+        opacity: var(--cx-opacity, 1);
+      }
     }
     padding-inline-start: 0;
     padding-top: 0.5rem;

diff --git a/feature-libs/pickup-in-store/styles/_store.scss b/feature-libs/pickup-in-store/styles/_store.scss
@@ -33,6 +33,9 @@
     .cx-store-opening-hours-icon {
       color: var(--cx-color-secondary);
       opacity: var(--cx-opacity, 0.5);
+      @include forFeature('a11yViewHoursButtonIconContrast') {
+        opacity: var(--cx-opacity, 1);
+      }
     }
     padding-inline-start: 0;
     padding-top: 0.5rem;

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/storefinder/assets/translations/en/storeFinder.json b/feature-libs/storefinder/assets/translations/en/storeFinder.json
@@ -22,7 +22,7 @@
     "useMyLocation": "Use my location",
     "viewAllStores": "View all stores",
     "contactUs": "Contact us",
-    "searchBox": "Postal code, town or address",
+    "searchBox": "Postal code or town or address",
     "backToList": "Back to list",
     "noStoresMessage": "No stores found in database...",
     "geolocationNotEnabled": "Cannot locate nearby stores. Geolocation consent has not been enabled",

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