From 40133ebb72fcf96f5a73de159294a714d4cf2518 Mon Sep 17 00:00:00 2001 From: roykho Date: Wed, 31 May 2023 13:43:23 -0700 Subject: [PATCH 1/2] Ensure aria-label is showing correct value based on setting --- assets/js/blocks/mini-cart/block.tsx | 36 ++++++++++++----- assets/js/blocks/mini-cart/utils/data.ts | 51 ++++++++++++++++-------- 2 files changed, 60 insertions(+), 27 deletions(-) diff --git a/assets/js/blocks/mini-cart/block.tsx b/assets/js/blocks/mini-cart/block.tsx index fc19a1f2f6e..6e637799f90 100644 --- 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 index ced7bfce848..b51299c847d 100644 --- a/assets/js/blocks/mini-cart/utils/data.ts +++ b/assets/js/blocks/mini-cart/utils/data.ts @@ -13,8 +13,8 @@ export const updateTotals = ( totals: [ string, number ] | undefined ) => { return; } const [ amount, quantity ] = totals; - const miniCartButtons = document.querySelectorAll( - '.wc-block-mini-cart__button' + const miniCarts = document.querySelectorAll( + '.wc-block-mini-cart.wp-block-woocommerce-mini-cart' ); const miniCartQuantities = document.querySelectorAll( '.wc-block-mini-cart__badge' @@ -23,21 +23,40 @@ export const updateTotals = ( totals: [ string, number ] | undefined ) => { '.wc-block-mini-cart__amount' ); - miniCartButtons.forEach( ( miniCartButton ) => { - 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', + miniCarts.forEach( ( miniCart ) => { + const hasHiddenPrice = miniCart.getAttribute( 'data-has-hidden-price' ); + const button = miniCart.querySelector( '.wc-block-mini-cart__button' ); + + if ( hasHiddenPrice ) { + button?.setAttribute( + 'aria-label', + 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 + ) + ); + } else { + button?.setAttribute( + 'aria-label', + 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, - 'woo-gutenberg-products-block' - ), - quantity, - amount - ) - ); + amount + ) + ); + } } ); miniCartQuantities.forEach( ( miniCartQuantity ) => { if ( quantity > 0 || miniCartQuantity.textContent !== '' ) { From 00ca71b3cebd1cbdcad62c30a45661be2884940a Mon Sep 17 00:00:00 2001 From: roykho Date: Wed, 31 May 2023 20:36:02 -0700 Subject: [PATCH 2/2] Reuse same format code --- assets/js/blocks/mini-cart/utils/data.ts | 68 ++++++++++++------------ 1 file changed, 33 insertions(+), 35 deletions(-) diff --git a/assets/js/blocks/mini-cart/utils/data.ts b/assets/js/blocks/mini-cart/utils/data.ts index b51299c847d..7cb5c78c316 100644 --- a/assets/js/blocks/mini-cart/utils/data.ts +++ b/assets/js/blocks/mini-cart/utils/data.ts @@ -13,9 +13,7 @@ export const updateTotals = ( totals: [ string, number ] | undefined ) => { return; } const [ amount, quantity ] = totals; - const miniCarts = document.querySelectorAll( - '.wc-block-mini-cart.wp-block-woocommerce-mini-cart' - ); + const miniCartBlocks = document.querySelectorAll( '.wc-block-mini-cart' ); const miniCartQuantities = document.querySelectorAll( '.wc-block-mini-cart__badge' ); @@ -23,40 +21,40 @@ export const updateTotals = ( totals: [ string, number ] | undefined ) => { '.wc-block-mini-cart__amount' ); - miniCarts.forEach( ( miniCart ) => { - const hasHiddenPrice = miniCart.getAttribute( 'data-has-hidden-price' ); - const button = miniCart.querySelector( '.wc-block-mini-cart__button' ); + miniCartBlocks.forEach( ( miniCartBlock ) => { + if ( ! ( miniCartBlock instanceof HTMLElement ) ) { + return; + } - if ( hasHiddenPrice ) { - button?.setAttribute( - 'aria-label', - 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 - ) - ); - } else { - button?.setAttribute( - 'aria-label', - 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', + const miniCartButton = miniCartBlock.querySelector( + '.wc-block-mini-cart__button' + ); + + miniCartButton?.setAttribute( + 'aria-label', + 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, - 'woo-gutenberg-products-block' - ), - quantity, - amount - ) - ); - } + amount + ) + ); } ); miniCartQuantities.forEach( ( miniCartQuantity ) => { if ( quantity > 0 || miniCartQuantity.textContent !== '' ) {