Accessibility: Taxonomy: When a new category or tag is being added, show a spinner and noop the button to avoid multiple requests.

Props andg, afercia, guddu1315, SergeyBiryukov.
Fixes #47607.
Built from https://develop.svn.wordpress.org/trunk@45683


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

wp-admin/css/edit-rtl.css

@@ -1163,6 +1163,11 @@ p.popular-tags a {
 	text-decoration: underline;
 }
 
+#addtag .spinner {
+	float: none;
+	vertical-align: top;
+}
+
 #edittag {
 	max-width: 800px;
 }

wp-admin/css/edit.css

@@ -1163,6 +1163,11 @@ p.popular-tags a {
 	text-decoration: underline;
 }
 
+#addtag .spinner {
+	float: none;
+	vertical-align: top;
+}
+
 #edittag {
 	max-width: 800px;
 }

wp-admin/edit-tags.php

@@ -515,9 +515,12 @@ if ( $can_edit_terms ) {
 	 * @param string $taxonomy The taxonomy slug.
 	 */
 	do_action( "{$taxonomy}_add_form_fields", $taxonomy );
-
-	submit_button( $tax->labels->add_new_item );
-
+	?>
+	<p class="submit">
+		<?php submit_button( $tax->labels->add_new_item, 'primary', 'submit', false ); ?>
+		<span class="spinner"></span>
+	</p>
+	<?php
 	if ( 'category' == $taxonomy ) {
 		/**
 		 * Fires at the end of the Edit Category form.

wp-admin/js/tags.js

@@ -11,6 +11,8 @@
 
 jQuery(document).ready(function($) {
 
+	var addingTerm = false;
+
 	/**
 	 * Adds an event handler to the delete term link on the term overview page.
 	 *
@@ -102,6 +104,14 @@ jQuery(document).ready(function($) {
 		if ( ! validateForm( form ) )
 			return false;
 
+		if ( addingTerm ) {
+			// If we're adding a term, noop the button to avoid duplicate requests.
+			return false;
+		}
+
+		addingTerm = true;
+		form.find( '.submit .spinner' ).addClass( 'is-active' );
+
 		/**
 		 * Does a request to the server to add a new term to the database
 		 *
@@ -112,6 +122,9 @@ jQuery(document).ready(function($) {
 		$.post(ajaxurl, $('#addtag').serialize(), function(r){
 			var res, parent, term, indent, i;
 
+			addingTerm = false;
+			form.find( '.submit .spinner' ).removeClass( 'is-active' );
+
 			$('#ajax-response').empty();
 			res = wpAjax.parseAjaxResponse( r, 'ajax-response' );
 			if ( ! res || res.errors )

wp-admin/js/tags.min.js

@@ -1 +1 @@
-jQuery(document).ready(function(a){a("#the-list").on("click",".delete-tag",function(){var b,c=a(this),d=c.parents("tr"),e=!0;return"undefined"!=showNotice&&(e=showNotice.warn()),e&&(b=c.attr("href").replace(/[^?]*\?/,"").replace(/action=delete/,"action=delete-tag"),a.post(ajaxurl,b,function(c){"1"==c?(a("#ajax-response").empty(),d.fadeOut("normal",function(){d.remove()}),a('select#parent option[value="'+b.match(/tag_ID=(\d+)/)[1]+'"]').remove(),a("a.tag-link-"+b.match(/tag_ID=(\d+)/)[1]).remove()):"-1"==c?(a("#ajax-response").empty().append('<div class="error"><p>'+tagsl10n.noPerm+"</p></div>"),d.children().css("backgroundColor","")):(a("#ajax-response").empty().append('<div class="error"><p>'+tagsl10n.broken+"</p></div>"),d.children().css("backgroundColor",""))}),d.children().css("backgroundColor","#f33")),!1}),a("#edittag").on("click",".delete",function(a){if("undefined"==typeof showNotice)return!0;var b=showNotice.warn();b||a.preventDefault()}),a("#submit").click(function(){var b=a(this).parents("form");return!!validateForm(b)&&(a.post(ajaxurl,a("#addtag").serialize(),function(c){var d,e,f,g,h;if(a("#ajax-response").empty(),d=wpAjax.parseAjaxResponse(c,"ajax-response"),d&&!d.errors){if(e=b.find("select#parent").val(),e>0&&a("#tag-"+e).length>0?a(".tags #tag-"+e).after(d.responses[0].supplemental.noparents):a(".tags").prepend(d.responses[0].supplemental.parents),a(".tags .no-items").remove(),b.find("select#parent")){for(f=d.responses[1].supplemental,g="",h=0;h<d.responses[1].position;h++)g+="&nbsp;&nbsp;&nbsp;";b.find("select#parent option:selected").after('<option value="'+f.term_id+'">'+g+f.name+"</option>")}a('input[type="text"]:visible, textarea:visible',b).val("")}}),!1)})});
+jQuery(document).ready(function(a){var b=!1;a("#the-list").on("click",".delete-tag",function(){var b,c=a(this),d=c.parents("tr"),e=!0;return"undefined"!=showNotice&&(e=showNotice.warn()),e&&(b=c.attr("href").replace(/[^?]*\?/,"").replace(/action=delete/,"action=delete-tag"),a.post(ajaxurl,b,function(c){"1"==c?(a("#ajax-response").empty(),d.fadeOut("normal",function(){d.remove()}),a('select#parent option[value="'+b.match(/tag_ID=(\d+)/)[1]+'"]').remove(),a("a.tag-link-"+b.match(/tag_ID=(\d+)/)[1]).remove()):"-1"==c?(a("#ajax-response").empty().append('<div class="error"><p>'+tagsl10n.noPerm+"</p></div>"),d.children().css("backgroundColor","")):(a("#ajax-response").empty().append('<div class="error"><p>'+tagsl10n.broken+"</p></div>"),d.children().css("backgroundColor",""))}),d.children().css("backgroundColor","#f33")),!1}),a("#edittag").on("click",".delete",function(a){if("undefined"==typeof showNotice)return!0;var b=showNotice.warn();b||a.preventDefault()}),a("#submit").click(function(){var c=a(this).parents("form");return!!validateForm(c)&&(!b&&(b=!0,c.find(".submit .spinner").addClass("is-active"),a.post(ajaxurl,a("#addtag").serialize(),function(d){var e,f,g,h,i;if(b=!1,c.find(".submit .spinner").removeClass("is-active"),a("#ajax-response").empty(),e=wpAjax.parseAjaxResponse(d,"ajax-response"),e&&!e.errors){if(f=c.find("select#parent").val(),f>0&&a("#tag-"+f).length>0?a(".tags #tag-"+f).after(e.responses[0].supplemental.noparents):a(".tags").prepend(e.responses[0].supplemental.parents),a(".tags .no-items").remove(),c.find("select#parent")){for(g=e.responses[1].supplemental,h="",i=0;i<e.responses[1].position;i++)h+="&nbsp;&nbsp;&nbsp;";c.find("select#parent option:selected").after('<option value="'+g.term_id+'">'+h+g.name+"</option>")}a('input[type="text"]:visible, textarea:visible',c).val("")}}),!1))})});

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.3-alpha-45682';
+$wp_version = '5.3-alpha-45683';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.