From a7a101465a77ca2fa4601e86b8d9b5b5a13aecfa Mon Sep 17 00:00:00 2001
From: PioBar <72926984+Pio-Bar@users.noreply.github.com>
Date: Mon, 13 Jan 2025 13:31:41 +0100
Subject: [PATCH] fix: (CXSPA-8999) - Descriptive repeating buttons (#19786)

---
 .../add-to-cart/add-to-cart.component.html    |  1 +
 .../set-preferred-store.component.html        | 93 +++++++++++++------
 .../set-preferred-store.component.spec.ts     |  8 +-
 .../set-preferred-store.component.ts          |  7 ++
 .../set-preferred-store.module.ts             |  4 +-
 .../presentational/store/store.component.html |  8 ++
 .../feature-toggles/config/feature-toggles.ts |  7 ++
 .../spartacus/spartacus-features.module.ts    |  1 +
 .../product-list-item.component.html          |  2 +-
 9 files changed, 100 insertions(+), 31 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
index 6be6a177de3..9ddda4e5208 100644
--- 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
@@ -43,6 +43,7 @@
     "
     type="submit"
     [disabled]="disabled || quantity <= 0 || quantity > maxQuantity"
+    [attr.aria-describedby]="productCode + '_header'"
   >
     <span
       *ngIf="
diff --git a/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.html b/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.html
index ddfce31a06a..b24cc4ef021 100644
--- a/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.html
+++ b/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.html
@@ -1,30 +1,69 @@
-<div
-  [attr.data-preferred-store]="pointOfServiceName.name"
-  [attr.data-store-is-selected]="
-    pointOfServiceName.name === (storeSelected$ | async)?.name
-  "
-  class="setpreferredstore-container"
-  (click)="setAsPreferred()"
->
+<ng-container *cxFeature="'a11yRepeatingButtonsUniqueLabels'">
+  <ng-container *ngIf="{ storeSelected: storeSelected$ | async } as data">
+    <div
+      [attr.data-preferred-store]="pointOfServiceName.name"
+      [attr.data-store-is-selected]="
+        pointOfServiceName.name === data.storeSelected?.name
+      "
+      class="setpreferredstore-container"
+      (click)="setAsPreferred()"
+    >
+      <div
+        [ngClass]="
+          pointOfServiceName.name === data.storeSelected?.name
+            ? 'icon-selected'
+            : 'icon-not-selected'
+        "
+      >
+        <cx-icon aria-hidden="true" [type]="ICON_TYPE.HEART"></cx-icon>
+      </div>
+      <button
+        data-text="setPreferredStore.myStore"
+        [attr.data-preferred-store]="pointOfServiceName.name"
+        class="set-preferred-heading"
+        [attr.aria-label]="
+          (getSetStoreButtonLabel(data.storeSelected?.name || '')
+            | cxTranslate) +
+          ', ' +
+          pointOfServiceName.displayName
+        "
+      >
+        {{
+          getSetStoreButtonLabel(data.storeSelected?.name || '') | cxTranslate
+        }}
+      </button>
+    </div>
+  </ng-container>
+</ng-container>
+<ng-container *cxFeature="'!a11yRepeatingButtonsUniqueLabels'">
   <div
-    [ngClass]="{
-      'icon-selected':
-        pointOfServiceName.name === (storeSelected$ | async)?.name,
-      'icon-not-selected':
-        pointOfServiceName.name !== (storeSelected$ | async)?.name,
-    }"
-  >
-    <cx-icon aria-hidden="true" [type]="ICON_TYPE.HEART"></cx-icon>
-  </div>
-  <button
-    data-text="setPreferredStore.myStore"
     [attr.data-preferred-store]="pointOfServiceName.name"
-    class="set-preferred-heading"
-  >
-    {{
+    [attr.data-store-is-selected]="
       pointOfServiceName.name === (storeSelected$ | async)?.name
-        ? ('setPreferredStore.myStore' | cxTranslate)
-        : ('setPreferredStore.makeThisMyStore' | cxTranslate)
-    }}
-  </button>
-</div>
+    "
+    class="setpreferredstore-container"
+    (click)="setAsPreferred()"
+  >
+    <div
+      [ngClass]="{
+        'icon-selected':
+          pointOfServiceName.name === (storeSelected$ | async)?.name,
+        'icon-not-selected':
+          pointOfServiceName.name !== (storeSelected$ | async)?.name,
+      }"
+    >
+      <cx-icon aria-hidden="true" [type]="ICON_TYPE.HEART"></cx-icon>
+    </div>
+    <button
+      data-text="setPreferredStore.myStore"
+      [attr.data-preferred-store]="pointOfServiceName.name"
+      class="set-preferred-heading"
+    >
+      {{
+        pointOfServiceName.name === (storeSelected$ | async)?.name
+          ? ('setPreferredStore.myStore' | cxTranslate)
+          : ('setPreferredStore.makeThisMyStore' | cxTranslate)
+      }}
+    </button>
+  </div>
+</ng-container>
diff --git a/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.spec.ts b/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.spec.ts
index 1313c8424c7..2fe0be79102 100644
--- a/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.spec.ts
+++ b/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.spec.ts
@@ -7,6 +7,7 @@ import {
   PreferredStoreFacade,
 } from '@spartacus/pickup-in-store/root';
 import { IconTestingModule, OutletContextData } from '@spartacus/storefront';
+import { MockFeatureDirectivesModule } from 'projects/storefrontlib/shared/test/mock-feature-directives.module';
 import { of } from 'rxjs';
 import { MockPreferredStoreService } from '../../../core/services/preferred-store.service.spec';
 import { SetPreferredStoreComponent } from './set-preferred-store.component';
@@ -24,7 +25,12 @@ describe('SetPreferredStoreComponent without outlet.context$', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [SetPreferredStoreComponent],
-      imports: [I18nTestingModule, IconTestingModule, CommonModule],
+      imports: [
+        I18nTestingModule,
+        IconTestingModule,
+        CommonModule,
+        MockFeatureDirectivesModule,
+      ],
       providers: [
         { provide: PreferredStoreFacade, useClass: MockPreferredStoreService },
       ],
diff --git a/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.ts b/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.ts
index 1f20d9be9c0..77a03fdf887 100644
--- a/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.ts
+++ b/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.component.ts
@@ -44,8 +44,15 @@ export class SetPreferredStoreComponent implements OnInit, OnDestroy {
   ngOnDestroy() {
     this.subscription.unsubscribe();
   }
+
   setAsPreferred(): boolean {
     this.preferredStoreFacade.setPreferredStore(this.pointOfServiceName);
     return false;
   }
+
+  getSetStoreButtonLabel(storeName: string): string {
+    return this.pointOfServiceName.name === storeName
+      ? 'setPreferredStore.myStore'
+      : 'setPreferredStore.makeThisMyStore';
+  }
 }
diff --git a/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.module.ts b/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.module.ts
index c82d29e635a..7b31699bc10 100644
--- a/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.module.ts
+++ b/feature-libs/pickup-in-store/components/container/set-preferred-store/set-preferred-store.module.ts
@@ -6,7 +6,7 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { I18nModule } from '@spartacus/core';
+import { FeaturesConfigModule, I18nModule } from '@spartacus/core';
 import { StoreFinderOutlets } from '@spartacus/storefinder/root';
 import {
   IconModule,
@@ -16,7 +16,7 @@ import {
 import { SetPreferredStoreComponent } from './set-preferred-store.component';
 
 @NgModule({
-  imports: [CommonModule, IconModule, I18nModule],
+  imports: [CommonModule, IconModule, I18nModule, FeaturesConfigModule],
   exports: [SetPreferredStoreComponent],
   declarations: [SetPreferredStoreComponent],
   providers: [
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
index 83285034766..4090dc6d34a 100644
--- a/feature-libs/pickup-in-store/components/presentational/store/store.component.html
+++ b/feature-libs/pickup-in-store/components/presentational/store/store.component.html
@@ -8,6 +8,11 @@
           <button
             (click)="toggleOpenHours()"
             [attr.aria-expanded]="openHoursOpen"
+            [attr.aria-label]="
+              ('store.viewHours' | cxTranslate) +
+              ', ' +
+              storeDetails.displayName
+            "
             class="cx-store-opening-hours-toggle"
           >
             {{ 'store.viewHours' | cxTranslate }}
@@ -65,6 +70,9 @@
     class="btn btn-secondary btn-block"
     [disabled]="!isInStock"
     [attr.data-pickup-in-store-button]="storeDetails.name"
+    [attr.aria-label]="
+      ('store.pickupFromHere' | cxTranslate) + ', ' + storeDetails.displayName
+    "
   >
     {{ 'store.pickupFromHere' | cxTranslate }}
   </button>
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 29c0075021f..9457e66901b 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
@@ -820,6 +820,12 @@ export interface FeatureTogglesInterface {
    */
   a11yHideConsentButtonWhenBannerVisible?: boolean;
 
+  /**
+   * Adds a unique `aria-label` to repeating buttons that contain the same text.
+   * Affects: SetPreferredStoreComponent
+   */
+  a11yRepeatingButtonsUniqueLabels?: boolean;
+
   /**
    * Ensures that borders across all UI elements are visible and meet accessibility standards in high-contrast dark and light themes.
    * This change is applied globally to enhance usability for users relying on high-contrast modes.
@@ -1091,6 +1097,7 @@ export const defaultFeatureToggles: Required<FeatureTogglesInterface> = {
   a11yFocusOnCardAfterSelecting: false,
   a11ySearchableDropdownFirstElementFocus: false,
   a11yHideConsentButtonWhenBannerVisible: false,
+  a11yRepeatingButtonsUniqueLabels: false,
   a11yHighContrastBorders: 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 f9a02531c6c..08ca9f9e27c 100644
--- a/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
+++ b/projects/storefrontapp/src/app/spartacus/spartacus-features.module.ts
@@ -420,6 +420,7 @@ if (environment.cpq) {
         a11yFocusOnCardAfterSelecting: true,
         a11ySearchableDropdownFirstElementFocus: true,
         a11yHideConsentButtonWhenBannerVisible: true,
+        a11yRepeatingButtonsUniqueLabels: true,
         a11yHighContrastBorders: true,
         cmsBottomHeaderSlotUsingFlexStyles: true,
         useSiteThemeService: true,
diff --git a/projects/storefrontlib/cms-components/product/product-list/product-list-item/product-list-item.component.html b/projects/storefrontlib/cms-components/product/product-list/product-list-item/product-list-item.component.html
index c54dbe95eb2..e80bb446705 100644
--- a/projects/storefrontlib/cms-components/product/product-list/product-list-item/product-list-item.component.html
+++ b/projects/storefrontlib/cms-components/product/product-list/product-list-item/product-list-item.component.html
@@ -20,7 +20,7 @@
   </div>
   <div class="col-12 col-md-8">
     <ng-container *cxFeature="'a11yExpandedFocusIndicator'">
-      <h2 class="cx-product-name">
+      <h2 [id]="product.code + '_header'" class="cx-product-name">
         <a
           [routerLink]="{ cxRoute: 'product', params: product } | cxUrl"
           [innerHtml]="product.nameHtml"