From e9a1c2efef8eddb2824016021eb0da9aff5e54db Mon Sep 17 00:00:00 2001
From: Stanislav Sukhanov <sukhanov.stas@gmail.com>
Date: Thu, 17 Oct 2024 10:53:38 +0200
Subject: [PATCH] fix: (CXSPA-7948) add aria-labelledby to quantity input
 (#19312)

Co-authored-by: Miguel Estrada <15113219+developpeurweb@users.noreply.github.com>
---
 .../base/components/add-to-cart/add-to-cart.component.html  | 3 ++-
 .../components/item-counter/item-counter.component.html     | 1 +
 .../components/item-counter/item-counter.component.ts       | 6 ++++++
 3 files changed, 9 insertions(+), 1 deletion(-)

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 cea53d5837f..489b2f32960 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
@@ -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/projects/storefrontlib/shared/components/item-counter/item-counter.component.html b/projects/storefrontlib/shared/components/item-counter/item-counter.component.html
index abf99b30313..6a3fd29b2a1 100644
--- a/projects/storefrontlib/shared/components/item-counter/item-counter.component.html
+++ b/projects/storefrontlib/shared/components/item-counter/item-counter.component.html
@@ -21,6 +21,7 @@
   (keyup.enter)="updateValue()"
   [cxFocus]="{ key: 'qty' }"
   attr.aria-label="{{ 'itemCounter.quantity' | cxTranslate }}"
+  [attr.aria-describedby]="ariaDescribedById"
 />
 <button
   type="button"
diff --git a/projects/storefrontlib/shared/components/item-counter/item-counter.component.ts b/projects/storefrontlib/shared/components/item-counter/item-counter.component.ts
index 7b764980869..52979e21310 100644
--- a/projects/storefrontlib/shared/components/item-counter/item-counter.component.ts
+++ b/projects/storefrontlib/shared/components/item-counter/item-counter.component.ts
@@ -65,6 +65,12 @@ export class ItemCounterComponent implements OnInit, OnDestroy {
    */
   @Input() allowZero = false;
 
+  /**
+   * ID of the element associated with the number input,
+   * so it gets narrated by a screen reader
+   */
+  @Input() ariaDescribedById: string = '';
+
   /**
    * In readonly mode the item counter will only be shown as a label,
    * the form controls are not rendered.