Merge pull request #3915 from WordPress/update/add-category-a11y-impr…

…ovements Add speak message when a category gets added.
WordPress · Dec 12, 2017 · 7aa9c25 · 7aa9c25
2 parents 360467b + c86ac88
commit 7aa9c25
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 13 deletions.
diff --git a/editor/components/post-taxonomies/flat-term-selector.js b/editor/components/post-taxonomies/flat-term-selector.js
@@ -150,9 +150,9 @@ class FlatTermSelector extends Component {
 		const termNames = availableTerms.map( ( term ) => term.name );
 
 		const newTermPlaceholderLabel = slug === 'post_tag' ? __( 'Add New Tag' ) : __( 'Add New Term' );
-		const termAddedLabel = slug === 'post_tag' ? __( 'Tag added.' ) : __( 'Term added.' );
-		const termRemovedLabel = slug === 'post_tag' ? __( 'Tag removed.' ) : __( 'Term removed.' );
-		const removeTermLabel = slug === 'post_tag' ? __( 'Remove Tag: %s.' ) : __( 'Remove Term: %s.' );
+		const termAddedLabel = slug === 'post_tag' ? __( 'Tag added' ) : __( 'Term added' );
+		const termRemovedLabel = slug === 'post_tag' ? __( 'Tag removed' ) : __( 'Term removed' );
+		const removeTermLabel = slug === 'post_tag' ? __( 'Remove Tag: %s' ) : __( 'Remove Term: %s' );
 
 		return (
 			<div className="editor-post-taxonomies__flat-terms-selector">
@@ -191,4 +191,3 @@ export default connect(
 		};
 	}
 )( FlatTermSelector );
-
diff --git a/editor/components/post-taxonomies/hierarchical-term-selector.js b/editor/components/post-taxonomies/hierarchical-term-selector.js
@@ -8,8 +8,8 @@ import { unescape as unescapeString, without, groupBy, map, repeat, find } from
  * WordPress dependencies
  */
 import { __, _x } from '@wordpress/i18n';
-import { Component } from '@wordpress/element';
-import { withInstanceId } from '@wordpress/components';
+import { Component, compose } from '@wordpress/element';
+import { withInstanceId, withSpokenMessages } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -86,8 +86,8 @@ class HierarchicalTermSelector extends Component {
 
 	onAddTerm( event ) {
 		event.preventDefault();
-		const { formName, formParent } = this.state;
-		if ( formName === '' ) {
+		const { formName, formParent, adding } = this.state;
+		if ( formName === '' || adding ) {
 			return;
 		}
 		const findOrCreatePromise = new Promise( ( resolve, reject ) => {
@@ -114,7 +114,9 @@ class HierarchicalTermSelector extends Component {
 			.then( ( term ) => {
 				const hasTerm = !! find( this.state.availableTerms, ( availableTerm ) => availableTerm.id === term.id );
 				const newAvailableTerms = hasTerm ? this.state.availableTerms : [ term, ...this.state.availableTerms ];
-				const { onUpdateTerms, restBase, terms } = this.props;
+				const { onUpdateTerms, restBase, terms, slug } = this.props;
+				const termAddedMessage = slug === 'category' ? __( 'Category added' ) : __( 'Term added' );
+				this.props.speak( termAddedMessage, 'assertive' );
 				this.setState( {
 					adding: false,
 					formName: '',
@@ -201,7 +203,7 @@ class HierarchicalTermSelector extends Component {
 	}
 
 	render() {
-		const { availableTermsTree, availableTerms, formName, formParent, loading, adding, showForm } = this.state;
+		const { availableTermsTree, availableTerms, formName, formParent, loading, showForm } = this.state;
 		const { label, slug, instanceId } = this.props;
 
 		const newTermButtonLabel = slug === 'category' ? __( 'Add new category' ) : __( 'Add new term' );
@@ -264,7 +266,6 @@ class HierarchicalTermSelector extends Component {
 						<button
 							type="submit"
 							className="button editor-post-taxonomies__hierarchical-terms-submit"
-							disabled={ adding }
 						>
 							{ newTermSubmitLabel }
 						</button>
@@ -276,7 +277,7 @@ class HierarchicalTermSelector extends Component {
 	}
 }
 
-export default connect(
+const applyConnect = connect(
 	( state, onwProps ) => {
 		return {
 			terms: getEditedPostAttribute( state, onwProps.restBase ),
@@ -287,4 +288,10 @@ export default connect(
 			return editPost( { [ restBase ]: terms } );
 		},
 	}
-)( withInstanceId( HierarchicalTermSelector ) );
+);
+
+export default compose(
+	applyConnect,
+	withSpokenMessages,
+	withInstanceId
+)( HierarchicalTermSelector );