Merge branch 'develop' into test-failing-storefront-lib

SAP · Oct 17, 2024 · d993d33 · d993d33
2 parents 7c7cf97 + 0393225
commit d993d33
Show file tree

Hide file tree

Showing 30 changed files with 1,453 additions and 313 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/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.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/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/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/projects/assets/src/translations/en/common.json b/projects/assets/src/translations/en/common.json
@@ -84,7 +84,8 @@
       "noMatch": "We could not find any results",
       "exactMatch": "{{ term }}",
       "empty": "Ask us anything"
-    }
+    },
+    "closeSearchPanel": "Close"
   },
   "sorting": {
     "date": "Date",