Render descriptive screen reader text for SearchFilter and SelectFilt…

…er components.
woocommerce · Dec 18, 2018 · 9fa1d5f · 9fa1d5f
1 parent 5dda38d
commit 9fa1d5f
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 15 deletions.
diff --git a/packages/components/src/filters/advanced/number-filter.js b/packages/components/src/filters/advanced/number-filter.js
@@ -13,9 +13,13 @@ import { sprintf, __, _x } from '@wordpress/i18n';
  * Internal dependencies
  */
 import TextControlWithAffixes from '../../text-control-with-affixes';
-import { formatCurrency } from '@woocommerce/currency';
 import { textContent } from './utils';
 
+/**
+ * WooCommerce dependencies
+ */
+import { formatCurrency } from '@woocommerce/currency';
+
 class NumberFilter extends Component {
 	getBetweenString() {
 		return _x(

diff --git a/packages/components/src/filters/advanced/search-filter.js b/packages/components/src/filters/advanced/search-filter.js
@@ -2,7 +2,7 @@
 /**
  * External dependencies
  */
-import { Component } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 import { SelectControl } from '@wordpress/components';
 import { find, partial } from 'lodash';
 import PropTypes from 'prop-types';
@@ -13,6 +13,7 @@ import classnames from 'classnames';
  * Internal dependencies
  */
 import Search from '../../search';
+import { textContent } from './utils';
 
 class SearchFilter extends Component {
 	constructor( { filter, config, query } ) {
@@ -42,18 +43,23 @@ class SearchFilter extends Component {
 		onFilterChange( filter.key, 'value', idList );
 	}
 
-	getLegend( filter, config ) {
+	getScreenReaderText( filter, config ) {
 		const { selected } = this.state;
+
+		if ( 0 === selected.length ) {
+			return '';
+		}
+
 		const rule = find( config.rules, { value: filter.rule } ) || {};
 		const filterStr = selected.map( item => item.label ).join( ', ' );
 
-		return interpolateComponents( {
+		return textContent( interpolateComponents( {
 			mixedString: config.labels.title,
 			components: {
-				filter: <span>{ filterStr }</span>,
-				rule: <span>{ rule.label }</span>,
+				filter: <Fragment>{ filterStr }</Fragment>,
+				rule: <Fragment>{ rule.label }</Fragment>,
 			},
-		} );
+		} ) );
 	}
 
 	render() {
@@ -86,11 +92,14 @@ class SearchFilter extends Component {
 				),
 			},
 		} );
+
+		const screenReaderText = this.getScreenReaderText( filter, config );
+
 		/*eslint-disable jsx-a11y/no-noninteractive-tabindex*/
 		return (
 			<fieldset tabIndex="0">
 				<legend className="screen-reader-text">
-					{ this.getLegend( filter, config, selected ) }
+					{ labels.add || '' }
 				</legend>
 				<div
 					className={ classnames( 'woocommerce-filters-advanced__fieldset', {
@@ -99,6 +108,11 @@ class SearchFilter extends Component {
 				>
 					{ children }
 				</div>
+				{ screenReaderText && (
+					<span className="screen-reader-text">
+						{ screenReaderText }
+					</span>
+				) }
 			</fieldset>
 		);
 		/*eslint-enable jsx-a11y/no-noninteractive-tabindex*/

diff --git a/packages/components/src/filters/advanced/select-filter.js b/packages/components/src/filters/advanced/select-filter.js
@@ -2,13 +2,18 @@
 /**
  * External dependencies
  */
-import { Component } from '@wordpress/element';
+import { Component, Fragment } from '@wordpress/element';
 import { SelectControl, Spinner } from '@wordpress/components';
 import { find, partial } from 'lodash';
 import PropTypes from 'prop-types';
 import interpolateComponents from 'interpolate-components';
 import classnames from 'classnames';
 
+/**
+ * Internal dependencies
+ */
+import { textContent } from './utils';
+
 /**
  * WooCommerce dependencies
  */
@@ -41,16 +46,21 @@ class SelectFilter extends Component {
 		return options;
 	}
 
-	getLegend( filter, config ) {
+	getScreenReaderText( filter, config ) {
+		if ( '' === filter.value ) {
+			return '';
+		}
+
 		const rule = find( config.rules, { value: filter.rule } ) || {};
 		const value = find( config.input.options, { value: filter.value } ) || {};
-		return interpolateComponents( {
+
+		return textContent( interpolateComponents( {
 			mixedString: config.labels.title,
 			components: {
-				filter: <span>{ value.label }</span>,
-				rule: <span>{ rule.label }</span>,
+				filter: <Fragment>{ value.label }</Fragment>,
+				rule: <Fragment>{ rule.label }</Fragment>,
 			},
-		} );
+		} ) );
 	}
 
 	render() {
@@ -83,17 +93,27 @@ class SelectFilter extends Component {
 				),
 			},
 		} );
+
+		const screenReaderText = this.getScreenReaderText( filter, config );
+
 		/*eslint-disable jsx-a11y/no-noninteractive-tabindex*/
 		return (
 			<fieldset tabIndex="0">
-				<legend className="screen-reader-text">{ this.getLegend( filter, config ) }</legend>
+				<legend className="screen-reader-text">
+					{ labels.add || '' }
+				</legend>
 				<div
 					className={ classnames( 'woocommerce-filters-advanced__fieldset', {
 						'is-english': isEnglish,
 					} ) }
 				>
 					{ children }
 				</div>
+				{ screenReaderText && (
+					<span className="screen-reader-text">
+						{ screenReaderText }
+					</span>
+				) }
 			</fieldset>
 		);
 		/*eslint-enable jsx-a11y/no-noninteractive-tabindex*/