Accessibility: Improve the Tags meta box accessibility.

- changes the "X" links in buttons, improves their color contrast ratio and focus style
- adds screen reader text "Remove item: + tagname"
- uses `wp.a11y.speak()` to give screen reader users feedback when adding/removing tags
- makes the `tagcloud-link` toggle a button, with an `aria-expanded` attribute to indicate the tag cloud collapsed/expanded state
- changes colors for the autocomplete highlighted option in order to have a better color contrast ratio
- reduces the font size for the autocomplete on Press This
- removes CSS related to the old `suggest.js` from Press This

Props joedolson, cgrymala, azaozz, afercia.
Fixes #27555.


git-svn-id: https://develop.svn.wordpress.org/trunk@38880 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/common.css

@@ -759,7 +759,7 @@ img.emoji {
 
 /* @todo can we combine these into a class or use an existing dashicon one? */
 .welcome-panel .welcome-panel-close:before,
-.tagchecklist span a:before,
+.tagchecklist .ntdelbutton .remove-tag-icon:before,
 #bulk-titles div a:before,
 .notice-dismiss:before {
 	background: none;
@@ -779,18 +779,41 @@ img.emoji {
 	margin: 0;
 }
 
-.tagchecklist span a:before,
 #bulk-titles div a:before {
 	margin: 1px 0;
 }
 
+.tagchecklist .ntdelbutton .remove-tag-icon:before {
+	margin-left: 2px;
+	-webkit-border-radius: 50%;
+	border-radius: 50%;
+	color: #0073aa;
+	/* vertically center the icon cross browsers */
+	line-height: 1.28;
+}
+
+.tagchecklist .ntdelbutton:focus {
+	outline: 0;
+}
+
 .welcome-panel .welcome-panel-close:hover:before,
 .welcome-panel .welcome-panel-close:focus:before,
-.tagchecklist span a:hover:before,
+.tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
-#bulk-titles div a:hover:before {
+.tagchecklist .ntdelbutton:focus .remove-tag-icon:before,
+#bulk-titles div a:hover:before,
+#bulk-titles div a:focus:before {
 	color: #c00;
 }
 
+.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
+	-webkit-box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+	box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
 .key-labels label {
 	line-height: 24px;
 }
@@ -3571,9 +3594,7 @@ img {
 	.sidebar-name-arrow,
 	.sidebar-name:hover .sidebar-name-arrow,
 	.meta-box-sortables .postbox:hover .handlediv,
-	.tagchecklist span a,
 	#bulk-titles div a,
-	.tagchecklist span a:hover,
 	#bulk-titles div a:hover {
 		background: none !important;
 	}

src/wp-admin/css/customize-controls.css

@@ -276,7 +276,9 @@ body {
 	box-sizing: border-box;
 	-webkit-transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
 	transition: 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
+	-webkit-transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
 	transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1);
+	-webkit-transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1);
 	transition: 0.18s transform cubic-bezier(0.645, 0.045, 0.355, 1), 0.18s -webkit-transform cubic-bezier(0.645, 0.045, 0.355, 1); /* easeInOutCubic */
 }
 

src/wp-admin/css/edit.css

@@ -582,10 +582,9 @@ span.wp-media-buttons-icon:before {
 	position: absolute;
 }
 
-.tagchecklist span {
+.tagchecklist > span {
-	margin-right: 25px;
-	display: block;
 	float: left;
+	margin-right: 25px;
 	font-size: 13px;
 	line-height: 1.8em;
 	cursor: default;
@@ -594,16 +593,16 @@ span.wp-media-buttons-icon:before {
 	text-overflow: ellipsis;
 }
 
-.tagchecklist span a {
+.tagchecklist .ntdelbutton {
-	margin: 1px 0 0 -17px;
-	cursor: pointer;
-	width: 20px;
-	height: 20px;
-	display: block;
-	float: left;
-	text-indent: 0;
-	overflow: hidden;
 	position: absolute;
+	width: 24px;
+	height: 24px;
+	border: none;
+	margin: 0 0 0 -19px;
+	padding: 0;
+	background: none;
+	cursor: pointer;
+	text-indent: 0;
 }
 
 #poststuff h3.hndle, /* Back-compat for pre-4.4 */
@@ -1027,6 +1026,25 @@ span.description,
 	width: 260px;
 }
 
+.tagcloud-link.button-link {
+	color: #0073aa;
+	text-decoration: underline;
+}
+
+.tagcloud-link.button-link:hover {
+	color: #00a0d2;
+}
+
+.tagcloud-link.button-link:focus {
+	color: #124964;
+	-webkit-box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+	box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+}
+
 #post-body-content .tagsdiv .the-tags {
 	margin: 0 5px;
 }
@@ -1052,6 +1070,7 @@ p.popular-tags a {
 	margin: 2px 0 12px;
 }
 
+/* Suggest.js autocomplete, no more used by core. */
 .ac_results {
 	display: none;
 	margin: -1px 0 0;
@@ -1438,7 +1457,7 @@ table.links-table {
 		margin: 25px 10px;
 	}
 
-	.tagchecklist span {
+	.tagchecklist > span {
 		font-size: 16px;
 		line-height: 1.4;
 	}

src/wp-admin/css/forms.css

@@ -594,11 +594,18 @@ ul#add-to-blog-users {
 	padding: 4px 10px;
 	white-space: nowrap;
 	text-align: left;
+	cursor: pointer;
 }
 
-.ui-autocomplete li.ui-state-focus {
+/* Colors for the wplink toolbar autocomplete. */
+.ui-autocomplete .ui-state-focus {
 	background-color: #ddd;
-	cursor: pointer;
+}
+
+/* Colors for the tags autocomplete. */
+.wp-tags-autocomplete .ui-state-focus {
+	background-color: #0073aa;
+	color: #fff;
 }
 
 /*------------------------------------------------------------------------------

src/wp-admin/css/ie.css

@@ -441,11 +441,15 @@ div#dashboard-widgets {
 	padding-right: 1px;
 }
 
-.tagchecklist span, .tagchecklist span a {
+.tagchecklist > span, .tagchecklist .ntdelbutton {
 	display: inline-block;
 	display: block;
 }
 
+.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
+	outline: 1px solid #5b9dd9;
+}
+
 .tablenav .button,
 .nav .button {
 	padding-top: 2px;

src/wp-admin/css/press-this.css

@@ -770,38 +770,6 @@ dd {
 	margin: 10px 0 6px 16px;
 }
 
-
-/* Tag hint TODO needed? */
-/* Tag suggestions */
-.ac_results {
-	padding: 0;
-	margin: -1px 0 0 -1px;
-	list-style: none;
-	position: absolute;
-	z-index: 10000;
-	display: none;
-	border: 1px solid #d8d8d8;
-	background-color: #fff;
-	font-size: 14px;
-}
-
-.ac_results li {
-	padding: 6px 16px;
-	white-space: nowrap;
-	text-align: left;
-}
-
-.ac_results .ac_over {
-	background-color: #e5e5e5;
-	background-color: #00a0d2;
-	color: #fff;
-	cursor: pointer;
-}
-
-.ac_match {
-	text-decoration: underline;
-}
-
 /* Tags */
 .tagchecklist {
 	padding: 16px 28px 5px;
@@ -817,10 +785,9 @@ dd {
 	clear: both;
 }
 
-.tagchecklist span {
+.tagchecklist > span {
-	display: block;
-	margin-right: 25px;
 	float: left;
+	margin-right: 25px;
 	font-size: 13px;
 	line-height: 1.8;
 	white-space: nowrap;
@@ -828,7 +795,7 @@ dd {
 }
 
 @media (max-width: 600px) {
-	.tagchecklist span {
+	.tagchecklist > span {
 		margin-bottom: 15px;
 		font-size: 16px;
 		line-height: 1.3;
@@ -836,36 +803,51 @@ dd {
 }
 
 .tagchecklist .ntdelbutton {
-	margin: 1px 0 0 -17px;
-	cursor: pointer;
-	width: 20px;
-	height: 20px;
-	display: block;
-	float: left;
-	text-indent: 0;
-	overflow: hidden;
 	position: absolute;
-	outline: 0;
+	width: 24px;
+	height: 24px;
+	border: none;
+	margin: 0 0 0 -19px;
+	padding: 0;
+	background: none;
+	cursor: pointer;
+	text-indent: 0;;
+	position: absolute;
 }
 
-.tagchecklist .ntdelbutton:before {
+.tagchecklist .ntdelbutton .remove-tag-icon:before {
 	content: "\f153";
 	display: block;
-	margin: 2px 0;
+	margin-left: 2px;
 	height: 20px;
 	width: 20px;
-	background: 0 0;
+	-webkit-border-radius: 50%;
-	color: #9ea7af;
+	border-radius: 50%;
-	font: 400 16px/1 dashicons;
+	background: transparent;
+	color: #0073aa;
+	/* line-height tweak to vertically center the icon cross browsers */
+	font: 400 16px/1.28 dashicons;
 	text-align: center;
-	speak: none;
 	-webkit-font-smoothing: antialiased;
 }
 
-.tagchecklist .ntdelbutton:focus:before {
+.tagchecklist .ntdelbutton:focus {
-	color: #00a0d2;
+	outline: 0;
 }
 
+.tagchecklist .ntdelbutton:hover .remove-tag-icon:before,
+.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
+	color: #c00;
+}
+
+.tagchecklist .ntdelbutton:focus .remove-tag-icon:before {
+	-webkit-box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+	box-shadow:
+		0 0 0 1px #5b9dd9,
+		0 0 2px 1px rgba(30, 140, 190, .8);
+}
 
 /* THE TAG CLOUD. */
 .tagsdiv + p {
@@ -2194,6 +2176,7 @@ html {
 	-webkit-box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
 	box-shadow: 0 1px 2px rgba( 30, 140, 190, 0.8 );
 	background-color: #fff;
+	font-size: 14px;
 }
 
 .ui-autocomplete li {
@@ -2201,9 +2184,16 @@ html {
 	padding: 4px 10px;
 	white-space: nowrap;
 	text-align: left;
-}
-
-.ui-autocomplete li.ui-state-focus {
-	background-color: #ddd;
 	cursor: pointer;
 }
+
+/* Colors for the wplink toolbar autocomplete. */
+.ui-autocomplete .ui-state-focus {
+	background-color: #ddd;
+}
+
+/* Colors for the tags autocomplete. */
+.wp-tags-autocomplete .ui-state-focus {
+	background-color: #0073aa;
+	color: #fff;
+}

src/wp-admin/includes/class-wp-press-this.php

@@ -940,7 +940,7 @@ class WP_Press_This {
 
 		if ( $user_can_assign_terms ) {
 			?>
-			<button type="button" class="button-link tagcloud-link" id="link-post_tag"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
+			<button type="button" class="button-link tagcloud-link" id="link-post_tag" aria-expanded="false"><?php echo $taxonomy->labels->choose_from_most_used; ?></button>
 			<?php
 		}
 	}

src/wp-admin/includes/meta-boxes.php

@@ -442,7 +442,7 @@ function post_tags_meta_box( $post, $box ) {
 	<div class="tagchecklist"></div>
 </div>
 <?php if ( $user_can_assign_terms ) : ?>
-<p class="hide-if-no-js"><a href="#titlediv" class="tagcloud-link" id="link-<?php echo $tax_name; ?>"><?php echo $taxonomy->labels->choose_from_most_used; ?></a></p>
+<p class="hide-if-no-js"><button type="button" class="button-link tagcloud-link" id="link-<?php echo $tax_name; ?>" aria-expanded="false"><?php echo $taxonomy->labels->choose_from_most_used; ?></button></p>
 <?php endif; ?>
 <?php
 }

src/wp-admin/js/tags-box.js

@@ -86,16 +86,28 @@ var tagBox, array_unique_noempty;
 
 				// If tags editing isn't disabled, create the X button.
 				if ( ! disabled ) {
-					xbutton = $( '<a id="' + id + '-check-num-' + key + '" class="ntdelbutton" tabindex="0">X</a>' );
+					/*
+					 * Build the X buttons, hide the X icon with aria-hidden and
+					 * use visually hidden text for screen readers.
+					 */
+					xbutton = $( '<button type="button" id="' + id + '-check-num-' + key + '" class="ntdelbutton">' +
+						'<span class="remove-tag-icon" aria-hidden="true"></span>' +
+						'<span class="screen-reader-text">' + window.tagsSuggestL10n.removeTerm + ' ' + val + '</span>' +
+						'</button>' );
 
 					xbutton.on( 'click keypress', function( e ) {
-						// Trigger function if pressed Enter - keyboard navigation
+						// On click or when using the Enter/Spacebar keys.
-						if ( e.type === 'click' || e.keyCode === 13 ) {
+						if ( 'click' === e.type || 13 === e.keyCode || 32 === e.keyCode ) {
-							// When using keyboard, move focus back to the new tag field.
+							/*
-							if ( e.keyCode === 13 ) {
+							 * When using the keyboard, move focus back to the
-								$( this ).closest( '.tagsdiv' ).find( 'input.newtag' ).focus();
+							 * add new tag field. Note: when releasing the pressed
-							}
+							 * key this will fire the `keyup` event on the input.
+							 */
+							if ( 13 === e.keyCode || 32 === e.keyCode ) {
+ 								$( this ).closest( '.tagsdiv' ).find( 'input.newtag' ).focus();
+ 							}
 
+							tagBox.userAction = 'remove';
 							tagBox.parseTags( this );
 						}
 					});
@@ -106,6 +118,8 @@ var tagBox, array_unique_noempty;
 				// Append the span to the tag list.
 				tagchecklist.append( span );
 			});
+			// The buttons list is built now, give feedback to screen reader users.
+			tagBox.screenReadersMessage();
 		},
 
 		flushTags : function( el, a, f ) {
@@ -117,7 +131,14 @@ var tagBox, array_unique_noempty;
 
 			text = a ? $(a).text() : newtag.val();
 
-			if ( 'undefined' == typeof( text ) ) {
+			/*
+			 * Return if there's no new tag or if the input field is empty.
+			 * Note: when using the keyboard to add tags, focus is moved back to
+			 * the input field and the `keyup` event attached on this field will
+			 * fire when releasing the pressed key. Checking also for the field
+			 * emptiness avoids to set the tags and call quickClicks() again.
+			 */
+			if ( 'undefined' == typeof( text ) || '' === text ) {
 				return false;
 			}
 
@@ -148,6 +169,7 @@ var tagBox, array_unique_noempty;
 				r = $( '<p id="tagcloud-' + tax + '" class="the-tagcloud">' + r + '</p>' );
 
 				$( 'a', r ).click( function() {
+					tagBox.userAction = 'add';
 					tagBox.flushTags( $( '#' + tax ), this );
 					return false;
 				});
@@ -156,6 +178,37 @@ var tagBox, array_unique_noempty;
 			});
 		},
 
+		/**
+		 * Track the user's last action.
+		 *
+		 * @since 4.7.0
+		 */
+		userAction: '',
+
+		/**
+		 * Dispatch an audible message to screen readers.
+		 *
+		 * @since 4.7.0
+		 */
+		screenReadersMessage: function() {
+			var message;
+
+			switch ( this.userAction ) {
+				case 'remove':
+					message = window.tagsSuggestL10n.termRemoved;
+					break;
+
+				case 'add':
+					message = window.tagsSuggestL10n.termAdded;
+					break;
+
+				default:
+					return;
+			}
+
+			window.wp.a11y.speak( message, 'assertive' );
+		},
+
 		init : function() {
 			var ajaxtag = $('div.ajaxtag');
 
@@ -164,11 +217,13 @@ var tagBox, array_unique_noempty;
 			});
 
 			$( '.tagadd', ajaxtag ).click( function() {
+				tagBox.userAction = 'add';
 				tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
 			});
 
 			$( 'input.newtag', ajaxtag ).keyup( function( event ) {
 				if ( 13 == event.which ) {
+					tagBox.userAction = 'add';
 					tagBox.flushTags( $( this ).closest( '.tagsdiv' ) );
 					event.preventDefault();
 					event.stopPropagation();
@@ -189,14 +244,19 @@ var tagBox, array_unique_noempty;
 				});
 			});
 
-			// tag cloud
+			// Fetch and toggle the Tag cloud.
 			$('.tagcloud-link').click(function(){
-				tagBox.get( $(this).attr('id') );
+				// On the first click, fetch the tag cloud and insert it in the DOM.
-				$(this).unbind().click(function(){
+				tagBox.get( $( this ).attr( 'id' ) );
-					$(this).siblings('.the-tagcloud').toggle();
+				// Update button state, remove previous click event and attach a new one to toggle the cloud.
-					return false;
+				$( this )
-				});
+					.attr( 'aria-expanded', 'true' )
-				return false;
+					.unbind()
+					.click( function() {
+						$( this )
+							.attr( 'aria-expanded', 'false' === $( this ).attr( 'aria-expanded' ) ? 'true' : 'false' )
+							.siblings( '.the-tagcloud' ).toggle();
+					});
 			});
 		}
 	};

src/wp-admin/js/tags-suggest.js

@@ -1,6 +1,13 @@
+/**
+ * Default settings for jQuery UI Autocomplete for use with non-hierarchical taxonomies.
+ */
 ( function( $ ) {
+	if ( typeof window.tagsSuggestL10n === 'undefined' || typeof window.uiAutocompleteL10n === 'undefined' ) {
+		return;
+	}
+
 	var tempID = 0;
-	var separator = ( window.tagsSuggestL10n && window.tagsSuggestL10n.tagDelimiter ) || ',';
+	var separator = window.tagsSuggestL10n.tagDelimiter || ',';
 
 	function split( val ) {
 		return val.split( new RegExp( separator + '\\s*' ) );
@@ -10,19 +17,33 @@
 		return split( term ).pop();
 	}
 
+	/**
+	 * Add UI Autocomplete to an input or textarea element with presets for use
+	 * with non-hierarchical taxonomies.
+	 *
+	 * Example: `$( element ).wpTagsSuggest( options )`.
+	 *
+	 * The taxonomy can be passed in a `data-wp-taxonomy` attribute on the element or
+	 * can be in `options.taxonomy`.
+	 *
+	 * @since 4.7
+	 *
+	 * @param {object} options Options that are passed to UI Autocomplete. Can be used to override the default settings.
+	 * @returns {object} jQuery instance.
+	 */
 	$.fn.wpTagsSuggest = function( options ) {
 		var cache;
 		var last;
 		var $element = $( this );
 
 		options = options || {};
-		
+
 		var taxonomy = options.taxonomy || $element.attr( 'data-wp-taxonomy' ) || 'post_tag';
-		
+
 		delete( options.taxonomy );
 
 		options = $.extend( {
-			source: function( request, response ) {				
+			source: function( request, response ) {
 				var term;
 
 				if ( last === request.term ) {
@@ -39,25 +60,25 @@
 				} ).always( function() {
 					$element.removeClass( 'ui-autocomplete-loading' ); // UI fails to remove this sometimes?
 				} ).done( function( data ) {
-					var value;
+					var tagName;
-					var terms = [];
+					var tags = [];
 
 					if ( data ) {
 						data = data.split( '\n' );
 
-						for ( value in data ) {
+						for ( tagName in data ) {
 							var id = ++tempID;
 
-							terms.push({
+							tags.push({
 								id: id,
-								name: data[value]
+								name: data[tagName]
 							});
 						}
 
-						cache = terms;
+						cache = tags;
-						response( terms );
+						response( tags );
 					} else {
-						response( terms );
+						response( tags );
 					}
 				} );
 
@@ -80,11 +101,8 @@
 				$element.val( tags.join( separator + ' ' ) );
 
 				if ( $.ui.keyCode.TAB === event.keyCode ) {
-					if ( typeof window.uiAutocompleteL10n !== 'undefined' ) {
+					// Audible confirmation message when a tag has been selected.
-						// Audible confirmation message when a tag has been selected.
+					window.wp.a11y.speak( window.tagsSuggestL10n.termSelected, 'assertive' );
-						window.wp.a11y.speak( window.uiAutocompleteL10n.itemSelected );
-					}
-
 					event.preventDefault();
 				} else if ( $.ui.keyCode.ENTER === event.keyCode ) {
 					// Do not close Quick Edit / Bulk Edit
@@ -105,15 +123,13 @@
 				my: 'left top+2'
 			},
 			messages: {
-				noResults: ( typeof window.uiAutocompleteL10n !== 'undefined' ) ? window.uiAutocompleteL10n.noResults : '',
+				noResults: window.uiAutocompleteL10n.noResults,
 				results: function( number ) {
-					if ( typeof window.uiAutocompleteL10n !== 'undefined' ) {
+					if ( number > 1 ) {
-						if ( number > 1 ) {
+						return window.uiAutocompleteL10n.manyResults.replace( '%d', number );
-							return window.uiAutocompleteL10n.manyResults.replace( '%d', number );
-						}
-
-						return window.uiAutocompleteL10n.oneResult;
 					}
+
+					return window.uiAutocompleteL10n.oneResult;
 				}
 			}
 		}, options );
@@ -160,7 +176,7 @@
 				// so we need to find the active item with other means.
 				$( this ).find( '[aria-selected="true"]' ).removeAttr( 'aria-selected' );
 			});
-			
+
 		return this;
 	};
 

src/wp-includes/script-loader.php

@@ -538,6 +538,10 @@ function wp_default_scripts( &$scripts ) {
 		$scripts->add( 'tags-suggest', "/wp-admin/js/tags-suggest$suffix.js", array( 'jquery-ui-autocomplete', 'wp-a11y' ), false, 1 );
 		did_action( 'init' ) && $scripts->localize( 'tags-suggest', 'tagsSuggestL10n', array(
 			'tagDelimiter' => _x( ',', 'tag delimiter' ),
+			'removeTerm'   => __( 'Remove term:' ),
+			'termSelected' => __( 'Term selected.' ),
+			'termAdded'    => __( 'Term added.' ),
+			'termRemoved'  => __( 'Term removed.' ),
 		) );
 
 		$scripts->add( 'post', "/wp-admin/js/post$suffix.js", array( 'suggest', 'wp-lists', 'postbox', 'tags-box', 'underscore', 'word-count', 'wp-a11y' ), false, 1 );