fix: (CXSPA-1094) - Store finder alerts (#18961)

Co-authored-by: Miguel Estrada <[email protected]>
SAP · Jul 15, 2024 · 34b9cc4 · 34b9cc4
1 parent 485f671
commit 34b9cc4
Show file tree

Hide file tree

Showing 12 changed files with 74 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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/...components/store-finder-pagination-details/store-finder-pagination-details.component.html b/...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/.../components/store-finder-search-result/store-finder-list/store-finder-list.component.html b/.../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/...storefinder/components/store-finder-stores-count/store-finder-stores-count.component.html b/...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/...s/storefinder/components/store-finder-stores-count/store-finder-stores-count.component.ts b/...s/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
  }),