Switch to span tags in a div for advanced number filter screen reader…

… text.

packages/components/src/filters/advanced/number-filter.js

@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import { Component, Fragment } from '@wordpress/element';
+import { Component } from '@wordpress/element';
 import { SelectControl, TextControl } from '@wordpress/components';
 import { get, find, partial } from 'lodash';
 import interpolateComponents from 'interpolate-components';
@@ -13,7 +13,6 @@ import { sprintf, __, _x } from '@wordpress/i18n';
  * Internal dependencies
  */
 import TextControlWithAffixes from '../../text-control-with-affixes';
-import { textContent } from './utils';
 
 /**
  * WooCommerce dependencies
@@ -53,20 +52,20 @@ class NumberFilter extends Component {
 			filterStr = interpolateComponents( {
 				mixedString: this.getBetweenString(),
 				components: {
-					rangeStart: <Fragment>{ rangeStart }</Fragment>,
-					rangeEnd: <Fragment>{ rangeEnd }</Fragment>,
-					span: <Fragment />,
+					rangeStart: <span>{ rangeStart }</span>,
+					rangeEnd: <span>{ rangeEnd }</span>,
+					span: <span />,
 				},
 			} );
 		}
 
-		return textContent( interpolateComponents( {
+		return interpolateComponents( {
 			mixedString: config.labels.title,
 			components: {
-				filter: <Fragment>{ filterStr }</Fragment>,
-				rule: <Fragment>{ rule.label }</Fragment>,
+				filter: <span>{ filterStr }</span>,
+				rule: <span>{ rule.label }</span>,
 			},
-		} ) );
+		} );
 	}
 
 	getFormControl( { type, value, label, onChange } ) {
@@ -231,9 +230,9 @@ class NumberFilter extends Component {
 					{ children }
 				</div>
 				{ screenReaderText && (
-					<span className="screen-reader-text">
+					<div className="screen-reader-text">
 						{ screenReaderText }
-					</span>
+					</div>
 				) }
 			</fieldset>
 		);