From 34b9cc44bdb4c20c7b5aebe053ad0ba682fee6b8 Mon Sep 17 00:00:00 2001
From: PioBar <72926984+Pio-Bar@users.noreply.github.com>
Date: Mon, 15 Jul 2024 11:12:56 +0200
Subject: [PATCH] fix: (CXSPA-1094) - Store finder alerts (#18961)

Co-authored-by: Miguel Estrada <15113219+developpeurweb@users.noreply.github.com>
---
 .../assets/translations/en/storeFinder.json   |  1 +
 .../store-finder-grid.component.html          | 21 ++++++++++++-------
 .../store-finder-grid.component.ts            |  8 ++++---
 ...e-finder-pagination-details.component.html |  2 +-
 .../store-finder-list.component.html          |  2 +-
 .../store-finder-stores-count.component.html  | 12 ++++++++++-
 .../store-finder-stores-count.component.ts    |  8 ++++---
 .../store-finder/store-finder.component.html  | 16 +++++---------
 .../styles/components/_store-finder-grid.scss | 17 +++++++++++++++
 .../_store-finder-stores-count.scss           |  7 +++++++
 .../feature-toggles/config/feature-toggles.ts | 12 +++++------
 .../spartacus/spartacus-features.module.ts    |  2 +-
 12 files changed, 74 insertions(+), 34 deletions(-)

diff --git a/feature-libs/storefinder/assets/translations/en/storeFinder.json b/feature-libs/storefinder/assets/translations/en/storeFinder.json
index 12955c62921..27ccbf0fb46 100644
--- a/feature-libs/storefinder/assets/translations/en/storeFinder.json
+++ b/feature-libs/storefinder/assets/translations/en/storeFinder.json
@@ -13,6 +13,7 @@
     "storeHours": "Store hours",
     "storeFeatures": "Store features",
     "storeFinder": "Store Finder",
+    "storesFoundTitle": "Stores Found",
     "storesFound": "{{ count }} store found",
     "storesFound_other": "{{ count }} stores found",
     "fromStoresFound": "from {{ count }} store found",
diff --git a/feature-libs/storefinder/components/store-finder-grid/store-finder-grid.component.html b/feature-libs/storefinder/components/store-finder-grid/store-finder-grid.component.html
index 0f5056d3e5b..36d29074f67 100644
--- a/feature-libs/storefinder/components/store-finder-grid/store-finder-grid.component.html
+++ b/feature-libs/storefinder/components/store-finder-grid/store-finder-grid.component.html
@@ -5,13 +5,20 @@
   "
 >
   <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
-  <div
-    class="container"
-    aria-live="assertive"
-    aria-atomic="true"
-    aria-relevant="additions"
-  >
-    <div class="cx-visually-hidden">
+  <div class="container">
+    <!-- TODO: (CXSPA-7581) - Remove feature flag next major release -->
+    <div *cxFeature="'a11yStoreFinderAlerts'" class="cx-counter">
+      <h3 class="cx-counter-title">
+        {{ 'storeFinder.storesFoundTitle' | cxTranslate }}
+      </h3>
+      <span role="alert">
+        {{
+          'storeFinder.storesFound'
+            | cxTranslate: { count: locations?.stores?.length }
+        }}
+      </span>
+    </div>
+    <div *cxFeature="'!a11yStoreFinderAlerts'" class="cx-visually-hidden">
       {{
         'storeFinder.storesFound'
           | cxTranslate: { count: locations?.stores?.length }
diff --git a/feature-libs/storefinder/components/store-finder-grid/store-finder-grid.component.ts b/feature-libs/storefinder/components/store-finder-grid/store-finder-grid.component.ts
index 36e304cc85c..365d5d81137 100644
--- a/feature-libs/storefinder/components/store-finder-grid/store-finder-grid.component.ts
+++ b/feature-libs/storefinder/components/store-finder-grid/store-finder-grid.component.ts
@@ -6,9 +6,9 @@
 
 import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { GeoPoint } from '@spartacus/core';
-import { Observable } from 'rxjs';
+import { GeoPoint, useFeatureStyles } from '@spartacus/core';
 import { StoreFinderService } from '@spartacus/storefinder/core';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'cx-store-finder-grid',
@@ -25,7 +25,9 @@ export class StoreFinderGridComponent implements OnInit {
   constructor(
     private storeFinderService: StoreFinderService,
     private route: ActivatedRoute
-  ) {}
+  ) {
+    useFeatureStyles('a11yStoreFinderAlerts');
+  }
 
   ngOnInit() {
     this.isLoading$ = this.storeFinderService.getStoresLoading();
diff --git a/feature-libs/storefinder/components/store-finder-pagination-details/store-finder-pagination-details.component.html b/feature-libs/storefinder/components/store-finder-pagination-details/store-finder-pagination-details.component.html
index 538af670480..a65ad9a2983 100644
--- a/feature-libs/storefinder/components/store-finder-pagination-details/store-finder-pagination-details.component.html
+++ b/feature-libs/storefinder/components/store-finder-pagination-details/store-finder-pagination-details.component.html
@@ -1,4 +1,4 @@
-<span class="cx-pagination-details">
+<span role="alert" class="cx-pagination-details">
   {{ getResultsPerPage() }}
   {{
     'storeFinder.fromStoresFound'
diff --git a/feature-libs/storefinder/components/store-finder-search-result/store-finder-list/store-finder-list.component.html b/feature-libs/storefinder/components/store-finder-search-result/store-finder-list/store-finder-list.component.html
index 6d81ecd58bc..5e21477f498 100644
--- a/feature-libs/storefinder/components/store-finder-search-result/store-finder-list/store-finder-list.component.html
+++ b/feature-libs/storefinder/components/store-finder-search-result/store-finder-list/store-finder-list.component.html
@@ -1,5 +1,5 @@
 <ng-container *ngIf="locations">
-  <div class="container mb-2" aria-atomic="true" aria-live="assertive">
+  <div class="container mb-2">
     <div class="row" *ngIf="locations?.pagination">
       <div class="col-md-12">
         <cx-store-finder-pagination-details
diff --git a/feature-libs/storefinder/components/store-finder-stores-count/store-finder-stores-count.component.html b/feature-libs/storefinder/components/store-finder-stores-count/store-finder-stores-count.component.html
index 26fb6951da1..8e9f4525484 100644
--- a/feature-libs/storefinder/components/store-finder-stores-count/store-finder-stores-count.component.html
+++ b/feature-libs/storefinder/components/store-finder-stores-count/store-finder-stores-count.component.html
@@ -5,14 +5,24 @@
   "
 >
   <div role="status" [attr.aria-label]="'common.loaded' | cxTranslate"></div>
+  <!-- TODO: (CXSPA-7581) - Remove feature flag next major release -->
+  <ng-container *cxFeature="'a11yStoreFinderAlerts'">
+    <div *ngIf="locations?.length" class="col-12 m-3">
+      <span role="alert">{{
+        'storeFinder.ariaLabelCountriesCount'
+          | cxTranslate: { count: locations?.length }
+      }}</span>
+    </div>
+  </ng-container>
   <div class="cx-count container">
     <div class="row" *ngIf="locations?.length">
-      <div class="cx-visually-hidden">
+      <div *cxFeature="'!a11yStoreFinderAlerts'" class="cx-visually-hidden">
         {{
           'storeFinder.ariaLabelCountriesCount'
             | cxTranslate: { count: locations?.length }
         }}
       </div>
+
       <div
         *ngFor="let country of locations"
         class="cx-set col-sm-6 col-md-4 col-lg-4 col-xl-3"
diff --git a/feature-libs/storefinder/components/store-finder-stores-count/store-finder-stores-count.component.ts b/feature-libs/storefinder/components/store-finder-stores-count/store-finder-stores-count.component.ts
index ce97ca63692..add6dbc7ef9 100644
--- a/feature-libs/storefinder/components/store-finder-stores-count/store-finder-stores-count.component.ts
+++ b/feature-libs/storefinder/components/store-finder-stores-count/store-finder-stores-count.component.ts
@@ -5,9 +5,9 @@
  */
 
 import { Component, OnInit, Optional, inject } from '@angular/core';
-import { Observable } from 'rxjs';
+import { RoutingService, useFeatureStyles } from '@spartacus/core';
 import { StoreFinderService } from '@spartacus/storefinder/core';
-import { RoutingService } from '@spartacus/core';
+import { Observable } from 'rxjs';
 
 @Component({
   selector: 'cx-store-finder-stores-count',
@@ -21,7 +21,9 @@ export class StoreFinderStoresCountComponent implements OnInit {
   locations$: Observable<any>;
   isLoading$: Observable<boolean>;
 
-  constructor(private storeFinderService: StoreFinderService) {}
+  constructor(private storeFinderService: StoreFinderService) {
+    useFeatureStyles('a11yStoreFinderAlerts');
+  }
 
   ngOnInit() {
     this.storeFinderService.viewAllStores();
diff --git a/feature-libs/storefinder/components/store-finder/store-finder.component.html b/feature-libs/storefinder/components/store-finder/store-finder.component.html
index f306be3a016..92ffe0afb78 100644
--- a/feature-libs/storefinder/components/store-finder/store-finder.component.html
+++ b/feature-libs/storefinder/components/store-finder/store-finder.component.html
@@ -1,6 +1,10 @@
 <ng-container>
+  <div *cxFeature="'a11yStoreFinderAlerts'" class="cx-store-finder-wrapper">
+    <cx-store-finder-header></cx-store-finder-header>
+    <router-outlet></router-outlet>
+  </div>
   <div
-    *cxFeature="'!a11yStoreFinderSearchboxBloat'"
+    *cxFeature="'!a11yStoreFinderAlerts'"
     aria-live="assertive"
     aria-relevant="additions text"
   >
@@ -9,14 +13,4 @@
       <router-outlet></router-outlet>
     </div>
   </div>
-  <div
-    *cxFeature="'a11yStoreFinderSearchboxBloat'"
-    class="cx-store-finder-wrapper"
-  >
-    <cx-store-finder-header></cx-store-finder-header>
-    <router-outlet
-      aria-live="assertive"
-      aria-relevant="additions text"
-    ></router-outlet>
-  </div>
 </ng-container>
diff --git a/feature-libs/storefinder/styles/components/_store-finder-grid.scss b/feature-libs/storefinder/styles/components/_store-finder-grid.scss
index 1af9a28c7a5..8006909e633 100644
--- a/feature-libs/storefinder/styles/components/_store-finder-grid.scss
+++ b/feature-libs/storefinder/styles/components/_store-finder-grid.scss
@@ -3,6 +3,11 @@
     border-style: solid;
     border-width: 1px 0 0 0;
     border-color: var(--cx-color-light);
+    @include forFeature('a11yStoreFinderAlerts') {
+      border-style: unset;
+      border-width: unset;
+      border-color: unset;
+    }
     display: inline-block;
     padding: 10px 0 0 0;
 
@@ -14,4 +19,16 @@
   .cx-spinner {
     padding: 2rem 0;
   }
+  // TODO: (CXSPA-7581) - Remove feature flag next major release
+  @include forFeature('a11yStoreFinderAlerts') {
+    .cx-counter {
+      text-align: start;
+      margin: 0 0.75rem 1.5rem 0.75rem;
+      line-height: var(--cx-line-height, 1.5);
+
+      &-title {
+        @include type('3');
+      }
+    }
+  }
 }
diff --git a/feature-libs/storefinder/styles/components/_store-finder-stores-count.scss b/feature-libs/storefinder/styles/components/_store-finder-stores-count.scss
index a735bb0b50d..40d9d921605 100644
--- a/feature-libs/storefinder/styles/components/_store-finder-stores-count.scss
+++ b/feature-libs/storefinder/styles/components/_store-finder-stores-count.scss
@@ -88,4 +88,11 @@
   .cx-count-spinner {
     padding: 30px 0;
   }
+  // TODO: (CXSPA-7581) - Remove feature flag next major release
+  @include forFeature('a11yStoreFinderAlerts') {
+    .cx-counter {
+      text-align: start;
+      margin: 0 0.75rem 0rem 0.75rem;
+    }
+  }
 }
diff --git a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
index 6e5c591caa7..8162cc50aa5 100644
--- a/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
+++ b/projects/core/src/features-config/feature-toggles/config/feature-toggles.ts
@@ -358,6 +358,11 @@ export interface FeatureTogglesInterface {
    */
   a11yFacetsDialogFocusHandling?: boolean;
 
+  /**
+   * Removes 'aria-live' from 'StoreFinderComponent' and adds 'alert' role to child components elements.
+   */
+  a11yStoreFinderAlerts?: boolean;
+
   /**
    * Stops the icon inside 'FormErrorsComponent' from being read out by screen readers.
    */
@@ -374,11 +379,6 @@ export interface FeatureTogglesInterface {
    */
   a11yLinkBtnsToTertiaryBtns?: boolean;
 
-  /**
-   * Modifies the template of `StoreFinderComponent` to exclude storefinder searchbox from aria-live area.
-   */
-  a11yStoreFinderSearchboxBloat?: boolean;
-
   /**
    * In OCC cart requests, it puts parameters of a cart name and cart description
    * into a request body, instead of query params.
@@ -450,10 +450,10 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yUseButtonsForBtnLinks: false,
   a11yDisabledCouponAndQuickOrderActionButtonsInsteadOfRequiredFields: false,
   a11yFacetsDialogFocusHandling: false,
+  a11yStoreFinderAlerts: false,
   a11yFormErrorMuteIcon: false,
   a11yCxMessageFocus: false,
   a11yLinkBtnsToTertiaryBtns: false,
-  a11yStoreFinderSearchboxBloat: false,
   occCartNameAndDescriptionInHttpRequestBody: false,
   cmsBottomHeaderSlotUsingFlexStyles: false,
 };
diff --git a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
index a4ea7ac06d8..f6e9bf3b12e 100644
--- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
+++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -330,12 +330,12 @@ if (environment.cpq) {
         a11yDisabledCouponAndQuickOrderActionButtonsInsteadOfRequiredFields:
           true,
         a11yFacetsDialogFocusHandling: true,
+        a11yStoreFinderAlerts: true,
         a11yFormErrorMuteIcon: true,
         a11yCxMessageFocus: true,
         occCartNameAndDescriptionInHttpRequestBody: true,
         a11yLinkBtnsToTertiaryBtns: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,
-        a11yStoreFinderSearchboxBloat: true,
       };
       return appFeatureToggles;
     }),