Accessibility: Change the terms "Quick Edit" link to a button.

For better accessibility and semantics, user interface controls that perform an
action should be buttons. Links should exclusively be used for navigation.
See #38677 / [42725].

Fixes #43382.

Built from https://develop.svn.wordpress.org/trunk@42727


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

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

@@ -455,7 +455,7 @@ class WP_Terms_List_Table extends WP_List_Table {
 				__( 'Edit' )
 			);
 			$actions['inline hide-if-no-js'] = sprintf(
-				'<a href="#" class="editinline aria-button-if-js" aria-label="%s">%s</a>',
+				'<button type="button" class="button-link editinline" aria-label="%s" aria-expanded="false">%s</button>',
 				/* translators: %s: taxonomy term name */
 				esc_attr( sprintf( __( 'Quick edit &#8220;%s&#8221; inline' ), $tag->name ) ),
 				__( 'Quick&nbsp;Edit' )

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

@@ -36,9 +36,9 @@ inlineEditTax = {
 		t.type = $('#the-list').attr('data-wp-lists').substr(5);
 		t.what = '#'+t.type+'-';
 
-		$('#the-list').on('click', 'a.editinline', function(){
+		$( '#the-list' ).on( 'click', '.editinline', function() {
-			inlineEditTax.edit(this);
+			$( this ).attr( 'aria-expanded', 'true' );
-			return false;
+			inlineEditTax.edit( this );
 		});
 
 		/**
@@ -219,8 +219,10 @@ inlineEditTax = {
 						$( '#parent' ).find( 'option[value=' + option_value + ']' ).text( row.find( '.row-title' ).text() );
 
 						row.hide().fadeIn( 400, function() {
-							// Move focus back to the Quick Edit link.
+							// Move focus back to the Quick Edit button.
-							row.find( '.editinline' ).focus();
+							row.find( '.editinline' )
+								.attr( 'aria-expanded', 'false' )
+								.focus();
 							wp.a11y.speak( inlineEditL10n.saved );
 						});
 
@@ -262,8 +264,10 @@ inlineEditTax = {
 			$('#'+id).siblings('tr.hidden').addBack().remove();
 			id = id.substr( id.lastIndexOf('-') + 1 );
 
-			// Show the taxonomy row and move focus back to the Quick Edit link.
+			// Show the taxonomy row and move focus back to the Quick Edit button.
-			$( this.what + id ).show().find( '.editinline' ).focus();
+			$( this.what + id ).show().find( '.editinline' )
+				.attr( 'aria-expanded', 'false' )
+				.focus();
 		}
 	},
 

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

@@ -1 +1 @@
-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){if(27===a.which)return inlineEditTax.revert()}),a(".cancel",c).click(function(){return inlineEditTax.revert()}),a(".save",c).click(function(){return inlineEditTax.save(this)}),a("input, select",c).keydown(function(a){if(13===a.which)return inlineEditTax.save(this)}),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",".wp-list-table.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()||"";return"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 .notice-error"),i=h.find(".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(".editinline").focus(),b.a11y.speak(inlineEditL10n.saved)})):(h.removeClass("hidden"),i.html(d),b.a11y.speak(i.text())):(h.removeClass("hidden"),i.html(inlineEditL10n.error),b.a11y.speak(inlineEditL10n.error))}),!1},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(".editinline").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);
+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",".editinline",function(){a(this).attr("aria-expanded","true"),inlineEditTax.edit(this)}),c.keyup(function(a){if(27===a.which)return inlineEditTax.revert()}),a(".cancel",c).click(function(){return inlineEditTax.revert()}),a(".save",c).click(function(){return inlineEditTax.save(this)}),a("input, select",c).keydown(function(a){if(13===a.which)return inlineEditTax.save(this)}),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",".wp-list-table.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()||"";return"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 .notice-error"),i=h.find(".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(".editinline").attr("aria-expanded","false").focus(),b.a11y.speak(inlineEditL10n.saved)})):(h.removeClass("hidden"),i.html(d),b.a11y.speak(i.text())):(h.removeClass("hidden"),i.html(inlineEditL10n.error),b.a11y.speak(inlineEditL10n.error))}),!1},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(".editinline").attr("aria-expanded","false").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/version.php

@@ -4,7 +4,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.0-alpha-42726';
+$wp_version = '5.0-alpha-42727';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.