fix: (CXSPA-7948) add aria-labelledby to quantity input (#19312)

Co-authored-by: Miguel Estrada <[email protected]>
SAP · Oct 17, 2024 · e9a1c2e · e9a1c2e
1 parent 313ba61
commit e9a1c2e
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 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
@@ -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
@@ -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
@@ -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.