Merge branch 'develop' into feature/CXCDS-12370

SAP · Oct 17, 2024 · 7acee19 · 7acee19
2 parents b939dfd + e9a1c2e
commit 7acee19
Show file tree

Hide file tree

Showing 38 changed files with 1,554 additions and 361 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -230,7 +230,7 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
       - name: Cache node_modules
         id: cache-node-modules
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         with:
           path: | 
             node_modules

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/wish-list/components/wish-list/wish-list.component.ts b/feature-libs/cart/wish-list/components/wish-list/wish-list.component.ts
@@ -7,6 +7,7 @@
 import { Component } from '@angular/core';
 import { Cart, OrderEntry } from '@spartacus/cart/base/root';
 import { WishListFacade } from '@spartacus/cart/wish-list/root';
+import { useFeatureStyles } from '@spartacus/core';
 import { Observable } from 'rxjs';
 
 @Component({
@@ -17,7 +18,9 @@ export class WishListComponent {
   wishList$: Observable<Cart> = this.wishListFacade.getWishList();
   loading$: Observable<boolean> = this.wishListFacade.getWishListLoading();
 
-  constructor(protected wishListFacade: WishListFacade) {}
+  constructor(protected wishListFacade: WishListFacade) {
+    useFeatureStyles('a11yVisibleFocusOverflows');
+  }
 
   removeEntry(item: OrderEntry) {
     this.wishListFacade.removeEntry(item);

diff --git a/feature-libs/cart/wish-list/styles/_wish-list.scss b/feature-libs/cart/wish-list/styles/_wish-list.scss
@@ -19,6 +19,12 @@
         }
       }
     }
+
+    @include forFeature('a11yVisibleFocusOverflows') {
+      .cx-remove-btn {
+        margin-top: 0.5rem;
+      }
+    }
   }
 
   .cx-empty-wish-list {

diff --git a/feature-libs/order/assets/translations/en/order.json b/feature-libs/order/assets/translations/en/order.json
@@ -130,7 +130,8 @@
       "AccountOrderHistoryComponent": "ALL ORDERS ({{param}})",
       "OrderReturnRequestListComponent": "RETURNS ({{param}})"
     },
-    "tabPanelContainerRegion": "Group with order history details"
+    "tabPanelContainerRegion": "Group with order history details",
+    "tabPanelContainerRegionGroup": "Group with order history details"
   },
   "returnRequestList": {
     "returnRequestId": "Return #",

diff --git a/...pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.ts b/...pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.ts
@@ -5,6 +5,7 @@
  */
 
 import { Component, Input, OnDestroy, OnInit, Optional } from '@angular/core';
+import { useFeatureStyles } from '@spartacus/core';
 
 import {
   PointOfServiceNames,
@@ -28,7 +29,9 @@ export class SetPreferredStoreComponent implements OnInit, OnDestroy {
   constructor(
     protected preferredStoreFacade: PreferredStoreFacade,
     @Optional() protected outlet: OutletContextData<PointOfServiceNames>
-  ) {}
+  ) {
+    useFeatureStyles('a11yVisibleFocusOverflows');
+  }
 
   ngOnInit() {
     this.subscription.add(

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
@@ -5,7 +5,7 @@
  */
 
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
-import { PointOfServiceStock } from '@spartacus/core';
+import { PointOfServiceStock, useFeatureStyles } from '@spartacus/core';
 import { storeHasStock } from '@spartacus/pickup-in-store/core';
 import { ICON_TYPE } from '@spartacus/storefront';
 
@@ -29,6 +29,10 @@ export class StoreComponent implements OnInit {
   openHoursOpen = false;
   readonly ICON_TYPE = ICON_TYPE;
 
+  constructor() {
+    useFeatureStyles('a11yVisibleFocusOverflows');
+  }
+
   ngOnInit(): void {
     this.isInStock = storeHasStock(this.storeDetails);
   }

diff --git a/feature-libs/pickup-in-store/styles/_set-preferred-store.scss b/feature-libs/pickup-in-store/styles/_set-preferred-store.scss
@@ -16,6 +16,11 @@
       text-decoration: underline;
       border: none;
       background: none;
+
+      @include forFeature('a11yVisibleFocusOverflows') {
+        padding-inline-start: 0;
+        margin-inline-start: 0.5rem;
+      }
     }
   }
 }
diff --git a/feature-libs/pickup-in-store/styles/_store.scss b/feature-libs/pickup-in-store/styles/_store.scss
@@ -38,6 +38,11 @@
     padding-top: 0.5rem;
     border: none;
     background: none;
+
+    @include forFeature('a11yVisibleFocusOverflows') {
+      padding-top: 0;
+      margin-top: 0.5rem;
+    }
   }
 
   .cx-stock-level {

diff --git a/...e/types/multi-selection-image/configurator-attribute-multi-selection-image.component.html b/...e/types/multi-selection-image/configurator-attribute-multi-selection-image.component.html
@@ -43,7 +43,6 @@
             createAttributeValueIdForConfigurator(attribute, value.valueCode) +
               '-input'
           }}"
-          aria-hidden="true"
           class="form-check-label"
         >
           <img
@@ -116,7 +115,6 @@
                 value.valueCode
               ) + '-input'
             }}"
-            aria-hidden="true"
             class="form-check-label"
             [style.cursor]="!isReadOnly(attribute) ? 'pointer' : 'default'"
             title="{{ getLabel(expMode, value.valueDisplay, value.valueCode) }}"

diff --git a/...ypes/multi-selection-image/configurator-attribute-multi-selection-image.component.spec.ts b/...ypes/multi-selection-image/configurator-attribute-multi-selection-image.component.spec.ts
@@ -376,18 +376,6 @@ describe('ConfiguratorAttributeMultiSelectionImageComponent', () => {
       );
     });
 
-    it("should contain label elements with class name 'form-check-label' and 'aria-hidden' attribute attribute that removes label from the accessibility tree", () => {
-      CommonConfiguratorTestUtilsService.expectElementContainsA11y(
-        expect,
-        htmlElem,
-        'label',
-        'form-check-label',
-        2,
-        'aria-hidden',
-        'true'
-      );
-    });
-
     it("should contain button elements with 'aria-label' attribute that point out that there is a description for the current value", () => {
       (config.features ?? {}).productConfiguratorAttributeTypesV2 = true;
       fixture.detectChanges();

diff --git a/...types/numeric-input-field/configurator-attribute-numeric-input-field.component.service.ts b/...types/numeric-input-field/configurator-attribute-numeric-input-field.component.service.ts
@@ -166,22 +166,22 @@ export class ConfiguratorAttributeNumericInputFieldService {
     if (valueName.includes('>')) {
       minVal = valueName;
       interval.minValueIncluded = false;
-      minVal = minVal.replace('>', '');
+      minVal = minVal.replace(/>/g, '');
     }
     if (valueName.includes('<')) {
       maxVal = valueName;
       interval.maxValueIncluded = false;
-      maxVal = maxVal.replace('<', '');
+      maxVal = maxVal.replace(/</g, '');
     }
     if (valueName.includes('≥')) {
       minVal = valueName;
       interval.minValueIncluded = true;
-      minVal = minVal.replace('≥', '');
+      minVal = minVal.replace(/≥/g, '');
     }
     if (valueName.includes('≤')) {
       maxVal = valueName;
       interval.maxValueIncluded = true;
-      maxVal = maxVal.replace('≤', '');
+      maxVal = maxVal.replace(/≤/g, '');
     }
     if (
       !valueName.includes('>') &&

diff --git a/...types/single-selection-image/configurator-attribute-single-selection-image.component.html b/...types/single-selection-image/configurator-attribute-single-selection-image.component.html
@@ -60,7 +60,6 @@
             createAttributeValueIdForConfigurator(attribute, value.valueCode) +
               '-input'
           }}"
-          aria-hidden="true"
           class="form-check-label form-radio-label"
         >
           <img
@@ -150,7 +149,6 @@
                 value.valueCode
               ) + '-input'
             }}"
-            aria-hidden="true"
             class="form-check-label form-radio-label"
             [style.cursor]="!isReadOnly(attribute) ? 'pointer' : 'default'"
             title="{{ getLabel(expMode, value.valueDisplay, value.valueCode) }}"

diff --git a/...es/single-selection-image/configurator-attribute-single-selection-image.component.spec.ts b/...es/single-selection-image/configurator-attribute-single-selection-image.component.spec.ts
@@ -359,18 +359,6 @@ describe('ConfiguratorAttributeSingleSelectionImageComponent', () => {
       );
     });
 
-    it("should contain label element with class name 'form-check-label' and 'aria-hidden' attribute that removes an element from the accessibility tree", () => {
-      CommonConfiguratorTestUtilsService.expectElementContainsA11y(
-        expect,
-        htmlElem,
-        'label',
-        'form-check-label',
-        1,
-        'aria-hidden',
-        'true'
-      );
-    });
-
     it("should contain button elements with 'aria-label' attribute that point out that there is a description for the current value", () => {
       (config.features ?? {}).productConfiguratorAttributeTypesV2 = true;
       fixture.detectChanges();

diff --git a/integration-libs/cds/src/recent-searches/recent-searches.component.html b/integration-libs/cds/src/recent-searches/recent-searches.component.html
@@ -1,35 +1,40 @@
 <ng-container *ngIf="result$ | async as results">
   <ng-container *ngIf="results?.length">
-    <div class="message">
-      {{ 'cdsRecentSearches.recentSearches' | cxTranslate }}
+    <div class="recent-searches">
+      <h3>
+        {{ 'cdsRecentSearches.recentSearches' | cxTranslate }}
+      </h3>
+      <ul
+        tabindex="0"
+        [ariaLabel]="'cdsRecentSearches.ariaRecentSearches' | cxTranslate"
+        role="listbox"
+      >
+        <li *ngFor="let recentSearch of results">
+          <a
+            role="option"
+            [innerHTML]="
+              recentSearch
+                | cxHighlight: (outletContext$ | async)?.search : false
+            "
+            [routerLink]="
+              {
+                cxRoute: 'search',
+                params: { query: recentSearch },
+              } | cxUrl
+            "
+            (mousedown)="$event.preventDefault()"
+            (keydown.arrowup)="shareEvent($any($event))"
+            (keydown.arrowdown)="shareEvent($any($event))"
+            (keydown.arrowleft)="shareEvent($any($event))"
+            (keydown.arrowright)="shareEvent($any($event))"
+            (keydown.enter)="shareEvent($any($event))"
+            (keydown.escape)="shareEvent($any($event))"
+            (blur)="shareEvent($any($event))"
+            (click)="updateChosenWord(recentSearch)"
+          >
+          </a>
+        </li>
+      </ul>
     </div>
-    <ul
-      class="recent-searches"
-      [ariaLabel]="'cdsRecentSearches.ariaRecentSearches' | cxTranslate"
-      role="listbox"
-    >
-      <li *ngFor="let recentSearch of results">
-        <a
-          role="option"
-          [innerHTML]="
-            recentSearch | cxHighlight: (outletContext$ | async)?.search : false
-          "
-          [routerLink]="
-            {
-              cxRoute: 'search',
-              params: { query: recentSearch },
-            } | cxUrl
-          "
-          (mousedown)="$event.preventDefault()"
-          (keydown.arrowup)="shareEvent($any($event))"
-          (keydown.arrowdown)="shareEvent($any($event))"
-          (keydown.enter)="shareEvent($any($event))"
-          (keydown.escape)="shareEvent($any($event))"
-          (blur)="shareEvent($any($event))"
-          (click)="updateChosenWord(recentSearch)"
-        >
-        </a>
-      </li>
-    </ul>
   </ng-container>
 </ng-container>
diff --git a/integration-libs/cds/src/trending-searches/trending-searches.component.html b/integration-libs/cds/src/trending-searches/trending-searches.component.html
@@ -1,26 +1,34 @@
 <ng-container *ngIf="searchPhrases$ | async as searchPhrases">
   <ng-container *ngIf="searchPhrases?.length">
-    <div class="message">
-      {{ 'cdsTrendingSearches.trendingSearches' | cxTranslate }}
+    <div class="trending-searches">
+      <h3>
+        {{ 'cdsTrendingSearches.trendingSearches' | cxTranslate }}
+      </h3>
+      <ul
+        tabindex="0"
+        [ariaLabel]="'cdsTrendingSearches.ariaTrendingSearches' | cxTranslate"
+      >
+        <li *ngFor="let phrase of searchPhrases">
+          <a
+            role="option"
+            [routerLink]="
+              {
+                cxRoute: 'search',
+                params: { query: phrase.searchPhrase },
+              } | cxUrl
+            "
+            (mousedown)="$event.preventDefault()"
+            (keydown.arrowup)="shareEvent($any($event))"
+            (keydown.arrowdown)="shareEvent($any($event))"
+            (keydown.arrowleft)="shareEvent($any($event))"
+            (keydown.arrowright)="shareEvent($any($event))"
+            (keydown.enter)="shareEvent($any($event))"
+            (keydown.escape)="shareEvent($any($event))"
+          >
+            {{ phrase.searchPhrase }}
+          </a>
+        </li>
+      </ul>
     </div>
-
-    <ul
-      class="recent-searches"
-      [ariaLabel]="'cdsTrendingSearches.ariaTrendingSearches' | cxTranslate"
-    >
-      <li *ngFor="let phrase of searchPhrases">
-        <a
-          role="option"
-          [routerLink]="
-            {
-              cxRoute: 'search',
-              params: { query: phrase.searchPhrase },
-            } | cxUrl
-          "
-        >
-          {{ phrase.searchPhrase }}
-        </a>
-      </li>
-    </ul>
   </ng-container>
 </ng-container>
diff --git a/integration-libs/cds/src/trending-searches/trending-searches.component.ts b/integration-libs/cds/src/trending-searches/trending-searches.component.ts
@@ -60,4 +60,11 @@ export class TrendingSearchesComponent implements OnInit {
   get contextObservable() {
     return this.outletContext?.context$ ?? EMPTY;
   }
+
+  shareEvent(event: KeyboardEvent) {
+    if (!event) {
+      throw new Error('Missing Event');
+    }
+    this.searchBoxComponentService.shareEvent(event);
+  }
 }
diff --git a/...cpq-quote/cpq-quote-discount/components/cpq-quote-discount-tbody/cpq-quote.component.html b/...cpq-quote/cpq-quote-discount/components/cpq-quote-discount-tbody/cpq-quote.component.html
@@ -11,8 +11,11 @@
       <span role="cell" class="cx-total cx-discount">
         {{ discount.isoCode
         }}{{
-          getDiscountedPrice(quoteDiscountData.basePrice?.value, discount.value)
-            | number: '1.2-2' : 'en-US'
+          getDiscountedPrice(
+            quoteDiscountData.basePrice?.value ?? 0,
+            discount.appliedValue,
+            quoteDiscountData.quantity
+          ) | number: '1.2-2' : 'en-US'
         }}
       </span>
     </ng-container>