Add screen reader text to price range (#4367)

woocommerce · Jun 23, 2021 · 6aa96b7 · 6aa96b7
1 parent 0ddacf3
commit 6aa96b7
Showing 1 changed file with 33 additions and 19 deletions.
diff --git 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>
 		</>
 	);
 };