Merge branch 'develop' into feat/cxspa-8660

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

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')"
       >

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

feature-libs/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

feature-libs/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

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);

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 {

feature-libs/checkout/base/components/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
   >

feature-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

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 #",

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": {

feature-libs/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 {

feature-libs/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(

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

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;

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;
+      }
     }
   }
 }

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 {

feature-libs/product-configurator/rulebased/components/attribute/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) }}"

feature-libs/product-configurator/rulebased/components/attribute/types/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();

feature-libs/product-configurator/rulebased/components/attribute/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) }}"

feature-libs/product-configurator/rulebased/components/attribute/types/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();