Commit 06b4039cc72 for woocommerce
commit 06b4039cc72b833d045ee81e04fce7d77509610a
Author: Thomas Roberts <5656702+opr@users.noreply.github.com>
Date: Wed May 6 17:19:40 2026 +0100
Fix order summary screen reader text fragmentation (#64480)
* fix: render cart item screen reader price as a single text node
* docs: list cartItemScreenReaderPrice in available filters index
* Add changefile(s) from automation for the following project(s): woocommerce
---------
Co-authored-by: woocommercebot <woocommercebot@users.noreply.github.com>
diff --git a/docs/block-development/extensible-blocks/cart-and-checkout-blocks/filters-in-cart-and-checkout/README.md b/docs/block-development/extensible-blocks/cart-and-checkout-blocks/filters-in-cart-and-checkout/README.md
index 81764173a4c..f1bb51a04d4 100644
--- a/docs/block-development/extensible-blocks/cart-and-checkout-blocks/filters-in-cart-and-checkout/README.md
+++ b/docs/block-development/extensible-blocks/cart-and-checkout-blocks/filters-in-cart-and-checkout/README.md
@@ -29,6 +29,7 @@ The following [Order Summary Items filters](/docs/block-development/extensible-b
- `cartItemClass`
- `cartItemPrice`
+- `cartItemScreenReaderPrice`
- `itemName`
- `subtotalPriceFormat`
diff --git a/plugins/woocommerce/changelog/64480-opr-issue-64452 b/plugins/woocommerce/changelog/64480-opr-issue-64452
new file mode 100644
index 00000000000..0c832c8946a
--- /dev/null
+++ b/plugins/woocommerce/changelog/64480-opr-issue-64452
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix `cartItemScreenReaderPrice` filter output being announced by screen readers as separate fragments instead of a single sentence.
\ No newline at end of file
diff --git a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx
index d5035f08770..b4e43c06105 100644
--- a/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/base/components/cart-checkout/order-summary/order-summary-item.tsx
@@ -16,7 +16,7 @@ import {
productPriceValidation,
} from '@woocommerce/blocks-checkout';
import { getSetting } from '@woocommerce/settings';
-import { createInterpolateElement, useMemo } from '@wordpress/element';
+import { useMemo } from '@wordpress/element';
import { useStoreCart } from '@woocommerce/base-context/hooks';
import { CartItem, isString } from '@woocommerce/types';
import { calculateSaleAmount } from '@woocommerce/base-utils';
@@ -162,13 +162,22 @@ const OrderSummaryItem = ( {
validation: productPriceScreenReaderValidation,
} );
- const ProductPriceScreenReaderOutput = () => {
- return createInterpolateElement( productPriceScreenReaderFormat, {
- quantity: <>{ quantity }</>,
- productName: <>{ name }</>,
- price: <>{ formatPrice( subtotalPrice, totalsCurrency ) }</>,
- } );
- };
+ // Build as one string (not React nodes) so screen readers announce the
+ // full sentence as a single unit rather than separate sibling text nodes.
+ const productPriceScreenReaderText = productPriceScreenReaderFormat.replace(
+ /<(quantity|productName|price)\/>/g,
+ ( _match, key ) => {
+ switch ( key ) {
+ case 'quantity':
+ return String( quantity );
+ case 'productName':
+ return name;
+ case 'price':
+ return formatPrice( subtotalPrice, totalsCurrency );
+ }
+ return '';
+ }
+ );
const cartItemClassNameFilter = applyCheckoutFilter( {
filterName: 'cartItemClass',
@@ -241,7 +250,7 @@ const OrderSummaryItem = ( {
<ProductMetadata { ...productMetaProps } />
</div>
<span className="screen-reader-text">
- <ProductPriceScreenReaderOutput />
+ { productPriceScreenReaderText }
</span>
<div
className="wc-block-components-order-summary-item__total-price"