diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js index a2f95fc6cbd..df27630a51f 100644 --- a/plugins/woocommerce-admin/packages/components/src/filters/advanced/number-filter.js +++ b/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: , filter: { filterStr }, rule: { rule.label }, }, @@ -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: , rule: ( ), }, - } ); + } ) ); /*eslint-disable jsx-a11y/no-noninteractive-tabindex*/ return (
diff --git a/plugins/woocommerce-admin/packages/components/src/filters/advanced/utils.js b/plugins/woocommerce-admin/packages/components/src/filters/advanced/utils.js new file mode 100644 index 00000000000..5e7a78356ca --- /dev/null +++ b/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} components array of components + * + * @returns {Array} array of processed components + */ +export function ariaHideStrings( components ) { + if ( ! isArray( components ) ) { + return components; + } + + return components.map( component => ( + isString( component ) && component.trim() + ? { component } + : component + ) ); +} diff --git a/plugins/woocommerce-admin/packages/components/src/filters/example.md b/plugins/woocommerce-admin/packages/components/src/filters/example.md index a11c2022c2c..95e04d278c8 100644 --- a/plugins/woocommerce-admin/packages/components/src/filters/example.md +++ b/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: [ {