Merge branch 'develop' into feature/GH-11637-plp

SAP · Oct 17, 2024 · d2f6870 · d2f6870
2 parents 2d121d5 + 35a1751
commit d2f6870
Show file tree

Hide file tree

Showing 52 changed files with 2,097 additions and 819 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/assets/translations/en/cart.json b/feature-libs/cart/base/assets/translations/en/cart.json
@@ -34,6 +34,7 @@
     "coupon": "Have a coupon?",
     "coupon_other": "Coupon codes",
     "couponLabel": "Enter a promo code here",
+    "addCoupon": "Add a coupon",
     "apply": "Apply",
     "placeholder": "Promo code",
     "applyVoucherSuccess": "{{voucherCode}} has been applied.",

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
@@ -12,8 +12,8 @@
     </ng-container>
 
     <form (ngSubmit)="applyVoucher()" [formGroup]="couponForm">
-      <label class="cx-cart-coupon-title">
-        {{ 'voucher.coupon' | cxTranslate }}
+      <label id="card-coupon-input-label" class="cx-cart-coupon-title">
+        {{ 'voucher.addCoupon' | cxTranslate }}
         <!-- TODO: (CXSPA-7479) Remove feature flags next major -->
         <ng-container
           *cxFeature="
@@ -37,7 +37,7 @@
           "
         >
           <input
-            [attr.aria-label]="'voucher.couponLabel' | cxTranslate"
+            [attr.aria-labelledby]="'card-coupon-input-label'"
             type="text"
             class="form-control input-coupon-code"
             formControlName="couponCode"
@@ -62,7 +62,7 @@
         >
           <!-- TODO: (CXSPA-7479) Remove feature flags next major -->
           <input
-            [attr.aria-label]="'voucher.couponLabel' | cxTranslate"
+            [attr.aria-labelledby]="'card-coupon-input-label'"
             required="true"
             type="text"
             class="form-control input-coupon-code"

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/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/...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.html b/feature-libs/pickup-in-store/components/presentational/store/store.component.html
@@ -7,6 +7,7 @@
         <div>
           <button
             (click)="toggleOpenHours()"
+            [attr.aria-expanded]="openHoursOpen"
             class="cx-store-opening-hours-toggle"
           >
             {{ 'store.viewHours' | cxTranslate }}

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,11 @@ export class StoreComponent implements OnInit {
   openHoursOpen = false;
   readonly ICON_TYPE = ICON_TYPE;
 
+  constructor() {
+    useFeatureStyles('a11yVisibleFocusOverflows');
+    useFeatureStyles('a11yViewHoursButtonIconContrast');
+  }
+
   ngOnInit(): void {
     this.isInStock = storeHasStock(this.storeDetails);
   }

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/_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
@@ -33,11 +33,19 @@
     .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;
     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/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",