NumberFilter: automatically hide non-interpolated strings in title label from accessibility tree.

plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js

@@ -14,6 +14,7 @@ import { sprintf, __, _x } from '@wordpress/i18n';
  */
 import TextControlWithAffixes from '../../text-control-with-affixes';
 import { formatCurrency } from '@woocommerce/currency';
+import { ariaHideStrings } from './utils';
 
 class NumberFilter extends Component {
 	getBetweenString() {
@@ -58,7 +59,6 @@ class NumberFilter extends Component {
 		return interpolateComponents( {
 			mixedString: config.labels.title,
 			components: {
-				ariaHide: <span />,
 				filter: <span>{ filterStr }</span>,
 				rule: <span>{ rule.label }</span>,
 			},
@@ -187,10 +187,9 @@ class NumberFilter extends Component {
 		const { key, rule } = filter;
 		const { labels, rules } = config;
 
-		const children = interpolateComponents( {
+		const children = ariaHideStrings( interpolateComponents( {
 			mixedString: labels.title,
 			components: {
-				ariaHide: <span aria-hidden />,
 				rule: (
 					<SelectControl
 						className="woocommerce-filters-advanced__rule"
@@ -210,7 +209,7 @@ class NumberFilter extends Component {
 					</div>
 				),
 			},
-		} );
+		} ) );
 		/*eslint-disable jsx-a11y/no-noninteractive-tabindex*/
 		return (
 			<fieldset tabIndex="0">

plugins/woocommerce-admin/packages/components/src/filters/advanced/utils.js

@@ -0,0 +1,24 @@
+/**
+ * External dependencies
+ */
+import { isArray, isString } from 'lodash';
+
+/**
+ * Hide all bare strings from the accessibility tree.
+ * Intended to process the result of interpolateComponents().
+ *
+ * @param {Array<string|ReactNode>} components array of components
+ *
+ * @returns {Array<string|ReactNode>} array of processed components
+ */
+export function ariaHideStrings( components ) {
+    if ( ! isArray( components ) ) {
+        return components;
+    }
+
+    return components.map( component => (
+        isString( component ) && component.trim()
+        ? <span aria-hidden>{ component }</span>
+        : component
+    ) );
+}

plugins/woocommerce-admin/packages/components/src/filters/example.md

@@ -93,7 +93,7 @@ const advancedFilters = {
 				add: 'Item Quantity',
 				remove: 'Remove item quantity filter',
 				rule: 'Select an item quantity filter match',
-				title: '{{ariaHide}}Item Quantity is {{/ariaHide}}{{rule /}} {{filter /}}',
+				title: 'Item Quantity is {{rule /}} {{filter /}}',
 			},
 			rules: [
 				{