From 5575b44e78e31a901639183cfa61dfa5b356175b Mon Sep 17 00:00:00 2001
From: Paulo Arromba <17236129+wavvves@users.noreply.github.com>
Date: Fri, 6 Jan 2023 15:21:56 +0000
Subject: [PATCH] Context for aria-label on cart quantity controls (#8099)

* Aria label context for "Remove item" action on cart

* Aria label context for quantity controls on cart
---
 .../components/quantity-selector/index.tsx    | 24 ++++++++++++-------
 .../cart-line-item-row.tsx                    |  8 +++++++
 2 files changed, 24 insertions(+), 8 deletions(-)

diff --git a/assets/js/base/components/quantity-selector/index.tsx b/assets/js/base/components/quantity-selector/index.tsx
index 1076c3c6dd4..c2d20c64b5c 100644
--- a/assets/js/base/components/quantity-selector/index.tsx
+++ b/assets/js/base/components/quantity-selector/index.tsx
@@ -186,9 +186,13 @@ const QuantitySelector = ( {
 				) }
 			/>
 			<button
-				aria-label={ __(
-					'Reduce quantity',
-					'woo-gutenberg-products-block'
+				aria-label={ sprintf(
+					/* translators: %s refers to the item name in the cart. */
+					__(
+						'Reduce quantity of %s',
+						'woo-gutenberg-products-block'
+					),
+					itemName
 				) }
 				className="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--minus"
 				disabled={ disabled || ! canDecrease }
@@ -197,7 +201,7 @@ const QuantitySelector = ( {
 					onChange( newQuantity );
 					speak(
 						sprintf(
-							/* translators: %s refers to the item name in the cart. */
+							/* translators: %s refers to the item's new quantity in the cart. */
 							__(
 								'Quantity reduced to %s.',
 								'woo-gutenberg-products-block'
@@ -211,9 +215,13 @@ const QuantitySelector = ( {
 				&#65293;
 			</button>
 			<button
-				aria-label={ __(
-					'Increase quantity',
-					'woo-gutenberg-products-block'
+				aria-label={ sprintf(
+					/* translators: %s refers to the item's name in the cart. */
+					__(
+						'Increase quantity of %s',
+						'woo-gutenberg-products-block'
+					),
+					itemName
 				) }
 				disabled={ disabled || ! canIncrease }
 				className="wc-block-components-quantity-selector__button wc-block-components-quantity-selector__button--plus"
@@ -222,7 +230,7 @@ const QuantitySelector = ( {
 					onChange( newQuantity );
 					speak(
 						sprintf(
-							/* translators: %s refers to the item name in the cart. */
+							/* translators: %s refers to the item's new quantity in the cart. */
 							__(
 								'Quantity increased to %s.',
 								'woo-gutenberg-products-block'
diff --git a/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx b/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx
index 2e2f13f063d..5ecfb80d399 100644
--- a/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx
+++ b/assets/js/blocks/cart/cart-line-items-table/cart-line-item-row.tsx
@@ -311,6 +311,14 @@ const CartLineItemRow: React.ForwardRefExoticComponent<
 							{ showRemoveItemLink && (
 								<button
 									className="wc-block-cart-item__remove-link"
+									aria-label={ sprintf(
+										/* translators: %s refers to the item's name in the cart. */
+										__(
+											'Remove %s from cart',
+											'woo-gutenberg-products-block'
+										),
+										name
+									) }
 									onClick={ () => {
 										onRemove();
 										removeItem();