Improve terms tokens feedback and accessibility. (#6214)

WordPress · Apr 19, 2018 · a105592 · a105592
1 parent 473ef22
commit a105592
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 8 deletions.
diff --git a/components/form-token-field/index.js b/components/form-token-field/index.js
@@ -451,9 +451,11 @@ class FormTokenField extends Component {
 		return components;
 	}
 
-	renderToken( token ) {
+	renderToken( token, index, tokens ) {
 		const value = this.getTokenValue( token );
 		const status = token.status ? token.status : undefined;
+		const termPosition = index + 1;
+		const termsCount = tokens.length;
 
 		return (
 			<Token
@@ -468,6 +470,8 @@ class FormTokenField extends Component {
 				onMouseLeave={ token.onMouseLeave }
 				disabled={ 'error' !== status && this.props.disabled }
 				messages={ this.props.messages }
+				termsCount={ termsCount }
+				termPosition={ termPosition }
 			/>
 		);
 	}
@@ -583,7 +587,7 @@ FormTokenField.defaultProps = {
 	messages: {
 		added: __( 'Item added.' ),
 		removed: __( 'Item removed.' ),
-		remove: __( 'Remove item: %s.' ),
+		remove: __( 'Remove item' ),
 	},
 };
 

diff --git a/components/form-token-field/token.js b/components/form-token-field/token.js
@@ -7,7 +7,8 @@ import { noop } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { sprintf } from '@wordpress/i18n';
+import withInstanceId from '../higher-order/with-instance-id';
+import { __, sprintf } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -25,6 +26,9 @@ function Token( {
 	onMouseEnter,
 	onMouseLeave,
 	messages,
+	termPosition,
+	termsCount,
+	instanceId,
 } ) {
 	const tokenClasses = classnames( 'components-form-token-field__token', {
 		'is-error': 'error' === status,
@@ -36,25 +40,39 @@ function Token( {
 
 	const onClick = () => onClickRemove( { value } );
 
+	const transformedValue = displayTransform( value );
+	const termPositionAndCount = sprintf(
+		/* translators: 1: term name, 2: term position in a set of terms, 3: total term set count. */
+		__( '%1$s (%2$s of %3$s)' ),
+		transformedValue,
+		termPosition,
+		termsCount
+	);
+
 	return (
 		<span
 			className={ tokenClasses }
 			onMouseEnter={ onMouseEnter }
 			onMouseLeave={ onMouseLeave }
 			title={ title }
 		>
-			<span className="components-form-token-field__token-text">
-				{ displayTransform( value ) }
+			<span
+				className="components-form-token-field__token-text"
+				id={ `components-form-token-field__token-text-${ instanceId }` }
+			>
+				<span className="screen-reader-text">{ termPositionAndCount }</span>
+				<span aria-hidden="true">{ transformedValue }</span>
 			</span>
 
 			<IconButton
 				className="components-form-token-field__remove-token"
 				icon="dismiss"
 				onClick={ ! disabled && onClick }
-				label={ sprintf( messages.remove, displayTransform( value ) ) }
+				label={ messages.remove }
+				aria-describedby={ `components-form-token-field__token-text-${ instanceId }` }
 			/>
 		</span>
 	);
 }
 
-export default Token;
+export default withInstanceId( Token );
diff --git a/editor/components/post-taxonomies/flat-term-selector.js b/editor/components/post-taxonomies/flat-term-selector.js
@@ -172,7 +172,7 @@ class FlatTermSelector extends Component {
 		);
 		const termAddedLabel = sprintf( _x( '%s added', 'term' ), singularName );
 		const termRemovedLabel = sprintf( _x( '%s removed', 'term' ), singularName );
-		const removeTermLabel = sprintf( _x( 'Remove %s: %%s', 'term' ), singularName );
+		const removeTermLabel = sprintf( _x( 'Remove %s', 'term' ), singularName );
 
 		return (
 			<FormTokenField