Accessibility: improvements for the taxonomies Quick Edit form.

Changes the "Cancel" and "Update" controls in buttons for better semantics and
accessibility. On cancel and successful saving, moves focus back to the term title
to avoid a focus loss. Dispatches error and success messages to `wp.a11y.speak`
to give assistive technologies users an audible feedback.

Patch prepared at #wpcdit, first Italian WordPress Contributor Day.

Props garusky, chiara_09.
Fixes #34613.
Built from https://develop.svn.wordpress.org/trunk@35605


git-svn-id: http://core.svn.wordpress.org/trunk@35569 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/includes/class-wp-terms-list-table.php

@@ -588,8 +588,8 @@ class WP_Terms_List_Table extends WP_List_Table {
 	?>
 
 		<p class="inline-edit-save submit">
-			<a href="#inline-edit" class="cancel button-secondary alignleft"><?php _e( 'Cancel' ); ?></a>
+			<button type="button" class="cancel button-secondary alignleft"><?php _e( 'Cancel' ); ?></button>
-			<a href="#inline-edit" class="save button-primary alignright"><?php echo $tax->labels->update_item; ?></a>
+			<button type="button" class="save button-primary alignright"><?php echo $tax->labels->update_item; ?></button>
 			<span class="spinner"></span>
 			<span class="error" style="display:none;"></span>
 			<?php wp_nonce_field( 'taxinlineeditnonce', '_inline_edit', false ); ?>

wp-admin/js/inline-edit-tax.js

@@ -1,7 +1,8 @@
 /* global inlineEditL10n, ajaxurl */
+window.wp = window.wp || {};
 
 var inlineEditTax;
-(function($) {
+( function( $, wp ) {
 inlineEditTax = {
 
 	init : function() {
@@ -22,10 +23,10 @@ inlineEditTax = {
 			}
 		});
 
-		$( 'a.cancel', row ).click( function() {
+		$( '.cancel', row ).click( function() {
 			return inlineEditTax.revert();
 		});
-		$( 'a.save', row ).click( function() {
+		$( '.save', row ).click( function() {
 			return inlineEditTax.save(this);
 		});
 		$( 'input, select', row ).keydown( function( e ) {
@@ -96,7 +97,9 @@ inlineEditTax = {
 		// make ajax request
 		$.post( ajaxurl, params,
 			function(r) {
-				var row, new_id, option_value;
+				var row, new_id, option_value,
+					$errorSpan = $( '#edit-' + id + ' .inline-edit-save .error' );
+
 				$( 'table.widefat .spinner' ).removeClass( 'is-active' );
 
 				if (r) {
@@ -117,16 +120,23 @@ inlineEditTax = {
 						// Update the value in the Parent dropdown.
 						$( '#parent' ).find( 'option[value=' + option_value + ']' ).text( row.find( '.row-title' ).text() );
 
-						row.hide().fadeIn();
+						row.hide().fadeIn( 400, function() {
+							// Move focus back to the taxonomy title.
+							row.find( '.row-title' ).focus();
+							wp.a11y.speak( inlineEditL10n.saved );
+						});
+
 					} else {
-						$('#edit-'+id+' .inline-edit-save .error').html(r).show();
+						$errorSpan.html( r ).show();
+						// Some error strings may contain HTML entities (e.g. `&#8220`), let's use the HTML element's text.
+						wp.a11y.speak( $errorSpan.text() );
 					}
 				} else {
-					$('#edit-'+id+' .inline-edit-save .error').html(inlineEditL10n.error).show();
+					$errorSpan.html( inlineEditL10n.error ).show();
+					wp.a11y.speak( inlineEditL10n.error );
 				}
 			}
 		);
-		return false;
 	},
 
 	revert : function() {
@@ -136,10 +146,9 @@ inlineEditTax = {
 			$( 'table.widefat .spinner' ).removeClass( 'is-active' );
 			$('#'+id).siblings('tr.hidden').addBack().remove();
 			id = id.substr( id.lastIndexOf('-') + 1 );
-			$(this.what+id).show();
+			// Show the taxonomy listing and move focus back to the taxonomy title.
+			$( this.what + id ).show().find( '.row-title' ).focus();
 		}
-
-		return false;
 	},
 
 	getId : function(o) {
@@ -149,4 +158,4 @@ inlineEditTax = {
 };
 
 $(document).ready(function(){inlineEditTax.init();});
-})(jQuery);
+})( jQuery, window.wp );

wp-admin/js/inline-edit-tax.min.js

@@ -1 +1 @@
-var inlineEditTax;!function(a){inlineEditTax={init:function(){var b=this,c=a("#inline-edit");b.type=a("#the-list").attr("data-wp-lists").substr(5),b.what="#"+b.type+"-",a("#the-list").on("click","a.editinline",function(){return inlineEditTax.edit(this),!1}),c.keyup(function(a){return 27===a.which?inlineEditTax.revert():void 0}),a("a.cancel",c).click(function(){return inlineEditTax.revert()}),a("a.save",c).click(function(){return inlineEditTax.save(this)}),a("input, select",c).keydown(function(a){return 13===a.which?inlineEditTax.save(this):void 0}),a('#posts-filter input[type="submit"]').mousedown(function(){b.revert()})},toggle:function(b){var c=this;"none"===a(c.what+c.getId(b)).css("display")?c.revert():c.edit(b)},edit:function(b){var c,d,e,f=this;return f.revert(),"object"==typeof b&&(b=f.getId(b)),c=a("#inline-edit").clone(!0),d=a("#inline_"+b),a("td",c).attr("colspan",a("th:visible, td:visible",".widefat:first thead").length),a(f.what+b).hide().after(c).after('<tr class="hidden"></tr>'),e=a(".name",d),e.find("img").replaceWith(function(){return this.alt}),e=e.text(),a(':input[name="name"]',c).val(e),e=a(".slug",d),e.find("img").replaceWith(function(){return this.alt}),e=e.text(),a(':input[name="slug"]',c).val(e),a(c).attr("id","edit-"+b).addClass("inline-editor").show(),a(".ptitle",c).eq(0).focus(),!1},save:function(b){var c,d,e=a('input[name="taxonomy"]').val()||"";return"object"==typeof b&&(b=this.getId(b)),a("table.widefat .spinner").addClass("is-active"),c={action:"inline-save-tax",tax_type:this.type,tax_ID:b,taxonomy:e},d=a("#edit-"+b).find(":input").serialize(),c=d+"&"+a.param(c),a.post(ajaxurl,c,function(c){var d,e,f;a("table.widefat .spinner").removeClass("is-active"),c?-1!==c.indexOf("<tr")?(a(inlineEditTax.what+b).siblings("tr.hidden").addBack().remove(),e=a(c).attr("id"),a("#edit-"+b).before(c).remove(),e?(f=e.replace(inlineEditTax.type+"-",""),d=a("#"+e)):(f=b,d=a(inlineEditTax.what+b)),a("#parent").find("option[value="+f+"]").text(d.find(".row-title").text()),d.hide().fadeIn()):a("#edit-"+b+" .inline-edit-save .error").html(c).show():a("#edit-"+b+" .inline-edit-save .error").html(inlineEditL10n.error).show()}),!1},revert:function(){var b=a("table.widefat tr.inline-editor").attr("id");return b&&(a("table.widefat .spinner").removeClass("is-active"),a("#"+b).siblings("tr.hidden").addBack().remove(),b=b.substr(b.lastIndexOf("-")+1),a(this.what+b).show()),!1},getId:function(b){var c="TR"===b.tagName?b.id:a(b).parents("tr").attr("id"),d=c.split("-");return d[d.length-1]}},a(document).ready(function(){inlineEditTax.init()})}(jQuery);
+window.wp=window.wp||{};var inlineEditTax;!function(a,b){inlineEditTax={init:function(){var b=this,c=a("#inline-edit");b.type=a("#the-list").attr("data-wp-lists").substr(5),b.what="#"+b.type+"-",a("#the-list").on("click","a.editinline",function(){return inlineEditTax.edit(this),!1}),c.keyup(function(a){return 27===a.which?inlineEditTax.revert():void 0}),a(".cancel",c).click(function(){return inlineEditTax.revert()}),a(".save",c).click(function(){return inlineEditTax.save(this)}),a("input, select",c).keydown(function(a){return 13===a.which?inlineEditTax.save(this):void 0}),a('#posts-filter input[type="submit"]').mousedown(function(){b.revert()})},toggle:function(b){var c=this;"none"===a(c.what+c.getId(b)).css("display")?c.revert():c.edit(b)},edit:function(b){var c,d,e,f=this;return f.revert(),"object"==typeof b&&(b=f.getId(b)),c=a("#inline-edit").clone(!0),d=a("#inline_"+b),a("td",c).attr("colspan",a("th:visible, td:visible",".widefat:first thead").length),a(f.what+b).hide().after(c).after('<tr class="hidden"></tr>'),e=a(".name",d),e.find("img").replaceWith(function(){return this.alt}),e=e.text(),a(':input[name="name"]',c).val(e),e=a(".slug",d),e.find("img").replaceWith(function(){return this.alt}),e=e.text(),a(':input[name="slug"]',c).val(e),a(c).attr("id","edit-"+b).addClass("inline-editor").show(),a(".ptitle",c).eq(0).focus(),!1},save:function(c){var d,e,f=a('input[name="taxonomy"]').val()||"";"object"==typeof c&&(c=this.getId(c)),a("table.widefat .spinner").addClass("is-active"),d={action:"inline-save-tax",tax_type:this.type,tax_ID:c,taxonomy:f},e=a("#edit-"+c).find(":input").serialize(),d=e+"&"+a.param(d),a.post(ajaxurl,d,function(d){var e,f,g,h=a("#edit-"+c+" .inline-edit-save .error");a("table.widefat .spinner").removeClass("is-active"),d?-1!==d.indexOf("<tr")?(a(inlineEditTax.what+c).siblings("tr.hidden").addBack().remove(),f=a(d).attr("id"),a("#edit-"+c).before(d).remove(),f?(g=f.replace(inlineEditTax.type+"-",""),e=a("#"+f)):(g=c,e=a(inlineEditTax.what+c)),a("#parent").find("option[value="+g+"]").text(e.find(".row-title").text()),e.hide().fadeIn(400,function(){e.find(".row-title").focus(),b.a11y.speak(inlineEditL10n.saved)})):(h.html(d).show(),b.a11y.speak(h.text())):(h.html(inlineEditL10n.error).show(),b.a11y.speak(inlineEditL10n.error))})},revert:function(){var b=a("table.widefat tr.inline-editor").attr("id");b&&(a("table.widefat .spinner").removeClass("is-active"),a("#"+b).siblings("tr.hidden").addBack().remove(),b=b.substr(b.lastIndexOf("-")+1),a(this.what+b).show().find(".row-title").focus())},getId:function(b){var c="TR"===b.tagName?b.id:a(b).parents("tr").attr("id"),d=c.split("-");return d[d.length-1]}},a(document).ready(function(){inlineEditTax.init()})}(jQuery,window.wp);

wp-includes/script-loader.php

@@ -562,9 +562,10 @@ function wp_default_scripts( &$scripts ) {
 			'comma' => trim( _x( ',', 'tag delimiter' ) ),
 		) );
 
-		$scripts->add( 'inline-edit-tax', "/wp-admin/js/inline-edit-tax$suffix.js", array( 'jquery' ), false, 1 );
+		$scripts->add( 'inline-edit-tax', "/wp-admin/js/inline-edit-tax$suffix.js", array( 'jquery', 'wp-a11y' ), false, 1 );
 		did_action( 'init' ) && $scripts->localize( 'inline-edit-tax', 'inlineEditL10n', array(
-			'error' => __('Error while saving the changes.')
+			'error' => __( 'Error while saving the changes.' ),
+			'saved' => __( 'Changes saved.' ),
 		) );
 
 		$scripts->add( 'plugin-install', "/wp-admin/js/plugin-install$suffix.js", array( 'jquery', 'thickbox' ), false, 1 );

wp-includes/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '4.4-beta3-35604';
+$wp_version = '4.4-beta3-35605';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.