Ensure aria-label is showing correct value based on setting (#9672)

* Ensure aria-label is showing correct value based on setting * Reuse same format code
woocommerce · Jun 1, 2023 · 421ab62 · 421ab62
1 parent fcf200e
commit 421ab62
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 27 deletions.
diff --git a/assets/js/blocks/mini-cart/block.tsx b/assets/js/blocks/mini-cart/block.tsx
@@ -212,17 +212,31 @@ const MiniCartBlock = ( attributes: Props ): JSX.Element => {
 		  parseInt( cartTotals.total_items_tax, 10 )
 		: parseInt( cartTotals.total_items, 10 );
 
-	const ariaLabel = sprintf(
-		/* translators: %1$d is the number of products in the cart. %2$s is the cart total */
-		_n(
-			'%1$d item in cart, total price of %2$s',
-			'%1$d items in cart, total price of %2$s',
-			cartItemsCount,
-			'woo-gutenberg-products-block'
-		),
-		cartItemsCount,
-		formatPrice( subTotal, getCurrencyFromPriceResponse( cartTotals ) )
-	);
+	const ariaLabel = hasHiddenPrice
+		? sprintf(
+				/* translators: %1$d is the number of products in the cart. */
+				_n(
+					'%1$d item in cart',
+					'%1$d items in cart',
+					cartItemsCount,
+					'woo-gutenberg-products-block'
+				),
+				cartItemsCount
+		  )
+		: sprintf(
+				/* translators: %1$d is the number of products in the cart. %2$s is the cart total */
+				_n(
+					'%1$d item in cart, total price of %2$s',
+					'%1$d items in cart, total price of %2$s',
+					cartItemsCount,
+					'woo-gutenberg-products-block'
+				),
+				cartItemsCount,
+				formatPrice(
+					subTotal,
+					getCurrencyFromPriceResponse( cartTotals )
+				)
+		  );
 
 	const colorStyle = {
 		backgroundColor: style?.color?.background,

diff --git a/assets/js/blocks/mini-cart/utils/data.ts b/assets/js/blocks/mini-cart/utils/data.ts
@@ -13,30 +13,47 @@ export const updateTotals = ( totals: [ string, number ] | undefined ) => {
 		return;
 	}
 	const [ amount, quantity ] = totals;
-	const miniCartButtons = document.querySelectorAll(
-		'.wc-block-mini-cart__button'
-	);
+	const miniCartBlocks = document.querySelectorAll( '.wc-block-mini-cart' );
 	const miniCartQuantities = document.querySelectorAll(
 		'.wc-block-mini-cart__badge'
 	);
 	const miniCartAmounts = document.querySelectorAll(
 		'.wc-block-mini-cart__amount'
 	);
 
-	miniCartButtons.forEach( ( miniCartButton ) => {
-		miniCartButton.setAttribute(
+	miniCartBlocks.forEach( ( miniCartBlock ) => {
+		if ( ! ( miniCartBlock instanceof HTMLElement ) ) {
+			return;
+		}
+
+		const miniCartButton = miniCartBlock.querySelector(
+			'.wc-block-mini-cart__button'
+		);
+
+		miniCartButton?.setAttribute(
 			'aria-label',
-			sprintf(
-				/* translators: %s number of products in cart. */
-				_n(
-					'%1$d item in cart, total price of %2$s',
-					'%1$d items in cart, total price of %2$s',
-					quantity,
-					'woo-gutenberg-products-block'
-				),
-				quantity,
-				amount
-			)
+			miniCartBlock.dataset.hasHiddenPrice
+				? sprintf(
+						/* translators: %s number of products in cart. */
+						_n(
+							'%1$d item in cart',
+							'%1$d items in cart',
+							quantity,
+							'woo-gutenberg-products-block'
+						),
+						quantity
+				  )
+				: sprintf(
+						/* translators: %1$d is the number of products in the cart. %2$s is the cart total */
+						_n(
+							'%1$d item in cart, total price of %2$s',
+							'%1$d items in cart, total price of %2$s',
+							quantity,
+							'woo-gutenberg-products-block'
+						),
+						quantity,
+						amount
+				  )
 		);
 	} );
 	miniCartQuantities.forEach( ( miniCartQuantity ) => {