From 6aa96b79ec5218a2acef5892dc65e1f778132a00 Mon Sep 17 00:00:00 2001
From: Mike Jolley <mike.jolley@me.com>
Date: Wed, 23 Jun 2021 11:51:46 +0100
Subject: [PATCH] Add screen reader text to price range (#4367)

---
 .../js/base/components/product-price/index.js | 52 ++++++++++++-------
 1 file changed, 33 insertions(+), 19 deletions(-)

diff --git a/assets/js/base/components/product-price/index.js b/assets/js/base/components/product-price/index.js
index b47acbb51db..3206f4fe470 100644
--- a/assets/js/base/components/product-price/index.js
+++ b/assets/js/base/components/product-price/index.js
@@ -1,11 +1,12 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import FormattedMonetaryAmount from '@woocommerce/base-components/formatted-monetary-amount';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { createInterpolateElement } from 'wordpress-element';
+import { formatPrice } from '@woocommerce/price-format';
 
 /**
  * Internal dependencies
@@ -21,25 +22,38 @@ const PriceRange = ( {
 } ) => {
 	return (
 		<>
-			<FormattedMonetaryAmount
-				className={ classNames(
-					'wc-block-components-product-price__value',
-					priceClassName
-				) }
-				currency={ currency }
-				value={ minPrice }
-				style={ priceStyle }
-			/>
-			&nbsp;&mdash;&nbsp;
-			<FormattedMonetaryAmount
-				className={ classNames(
-					'wc-block-components-product-price__value',
-					priceClassName
+			<span className="screen-reader-text">
+				{ sprintf(
+					/* translators: %1$s min price, %2$s max price */
+					__(
+						'Price between %1$s and %2$s',
+						'woo-gutenberg-products-block'
+					),
+					formatPrice( minPrice ),
+					formatPrice( maxPrice )
 				) }
-				currency={ currency }
-				value={ maxPrice }
-				style={ priceStyle }
-			/>
+			</span>
+			<span aria-hidden={ true }>
+				<FormattedMonetaryAmount
+					className={ classNames(
+						'wc-block-components-product-price__value',
+						priceClassName
+					) }
+					currency={ currency }
+					value={ minPrice }
+					style={ priceStyle }
+				/>
+				&nbsp;&mdash;&nbsp;
+				<FormattedMonetaryAmount
+					className={ classNames(
+						'wc-block-components-product-price__value',
+						priceClassName
+					) }
+					currency={ currency }
+					value={ maxPrice }
+					style={ priceStyle }
+				/>
+			</span>
 		</>
 	);
 };