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
woocommerce · Jan 6, 2023 · 5575b44 · 5575b44
1 parent afe0f2a
commit 5575b44
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 8 deletions.
diff --git 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
@@ -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();