Administration: A11y: Add `role="alert"` on JS injected admin notices.

Add the attribute `role="alert"` on 12 instances of admin notices that are injected into the DOM using JavaScript. The `role="alert"` attribute allows screen readers to recognize the addition to the DOM and announce the errors to users.

Props afercia, cyrus11, rcreators, joedolson.
Fixes #47111.
Built from https://develop.svn.wordpress.org/trunk@58455


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

wp-admin/js/customize-widgets.js

@@ -1623,7 +1623,8 @@
 
 				// @todo This should use the Notifications API introduced to panels. See <https://core.trac.wordpress.org/ticket/38794>.
 				noticeContainer = $( '<div></div>', {
-					'class': 'no-widget-areas-rendered-notice'
+					'class': 'no-widget-areas-rendered-notice',
+					'role': 'alert'
 				});
 				panelMetaContainer.append( noticeContainer );
 

wp-admin/js/privacy-tools.js

@@ -47,7 +47,7 @@ jQuery( function( $ ) {
 
 		$requestRow.after( function() {
 			return '<tr class="' + resultRowClasses + '"><th colspan="5">' +
-				'<div class="notice inline notice-alt ' + classes + '">' +
+				'<div class="notice inline notice-alt ' + classes + '" role="alert">' +
 				'<p>' + summaryMessage + '</p>' +
 				itemList +
 				'</div>' +

wp-admin/js/updates.js

@@ -875,7 +875,7 @@
 
 		$card
 			.addClass( 'plugin-card-update-failed' )
-			.append( '<div class="notice notice-error notice-alt is-dismissible"><p>' + errorMessage + '</p></div>' );
+			.append( '<div class="notice notice-error notice-alt is-dismissible" role="alert"><p>' + errorMessage + '</p></div>' );
 
 		$card.on( 'click', '.notice.is-dismissible .notice-dismiss', function() {
 
@@ -2260,7 +2260,7 @@
 
 		// Remove any existing error.
 		$filesystemForm.find( '.notice' ).remove();
-		$filesystemForm.find( '#request-filesystem-credentials-title' ).after( '<div class="notice notice-alt notice-error"><p>' + message + '</p></div>' );
+		$filesystemForm.find( '#request-filesystem-credentials-title' ).after( '<div class="notice notice-alt notice-error" role="alert"><p>' + message + '</p></div>' );
 	};
 
 	/**

wp-admin/js/user-profile.js

@@ -151,7 +151,9 @@
 	 * @param {string}        message The message to insert.
 	 */
 	function addInlineNotice( $this, success, message ) {
-		var resultDiv = $( '<div />' );
+		var resultDiv = $( '<div />', {
+			role: 'alert'
+		} );
 
 		// Set up the notice div.
 		resultDiv.addClass( 'notice inline' );
@@ -474,10 +476,10 @@
 		}).done( function( response ) {
 			$this.prop( 'disabled', true );
 			$this.siblings( '.notice' ).remove();
-			$this.before( '<div class="notice notice-success inline"><p>' + response.message + '</p></div>' );
+			$this.before( '<div class="notice notice-success inline" role="alert"><p>' + response.message + '</p></div>' );
 		}).fail( function( response ) {
 			$this.siblings( '.notice' ).remove();
-			$this.before( '<div class="notice notice-error inline"><p>' + response.message + '</p></div>' );
+			$this.before( '<div class="notice notice-error inline" role="alert"><p>' + response.message + '</p></div>' );
 		});
 
 		e.preventDefault();

wp-admin/js/widgets/custom-html-widgets.js

@@ -148,7 +148,7 @@ wp.customHtmlWidgets = ( function( $ ) {
 					} ) );
 				}
 			} else if ( 0 !== errorAnnotations.length ) {
-				errorNotice = $( '<div class="inline notice notice-error notice-alt"></div>' );
+				errorNotice = $( '<div class="inline notice notice-error notice-alt" role="alert"></div>' );
 				errorNotice.append( $( '<p></p>', {
 					text: message
 				} ) );

wp-admin/js/widgets/media-widgets.js

@@ -158,7 +158,7 @@ wp.mediaWidgets = ( function( $ ) {
 							}
 						} else {
 							if ( ! noticeContainer.length ) {
-								noticeContainer = $( '<div class="media-widget-embed-notice notice notice-error notice-alt"></div>' );
+								noticeContainer = $( '<div class="media-widget-embed-notice notice notice-error notice-alt" role="alert"></div>' );
 								noticeContainer.hide();
 								embedLinkView.views.parent.$el.prepend( noticeContainer );
 							}

wp-includes/js/wp-ajax-response.js

@@ -53,10 +53,10 @@ window.wpAjax = jQuery.extend( {
 				parsed.responses.push( response );
 			} );
 			if ( err.length ) {
-				re.html( '<div class="notice notice-error">' + err + '</div>' );
+				re.html( '<div class="notice notice-error" role="alert">' + err + '</div>' );
 				wp.a11y.speak( err );
 			} else if ( noticeMessage.length ) {
-				re.html( '<div class="notice notice-success is-dismissible"><p>' + noticeMessage + '</p></div>');
+				re.html( '<div class="notice notice-success is-dismissible" role="alert"><p>' + noticeMessage + '</p></div>');
 				jQuery(document).trigger( 'wp-updates-notice-added' );
 				wp.a11y.speak( noticeMessage );
 			}
@@ -64,15 +64,15 @@ window.wpAjax = jQuery.extend( {
 		}
 		if ( isNaN( x ) ) {
 			wp.a11y.speak( x );
-			return ! re.html( '<div class="notice notice-error"><p>' + x + '</p></div>' );
+			return ! re.html( '<div class="notice notice-error" role="alert"><p>' + x + '</p></div>' );
 		}
 		x = parseInt( x, 10 );
 		if ( -1 === x ) {
 			wp.a11y.speak( wpAjax.noPerm );
-			return ! re.html( '<div class="notice notice-error"><p>' + wpAjax.noPerm + '</p></div>' );
+			return ! re.html( '<div class="notice notice-error" role="alert"><p>' + wpAjax.noPerm + '</p></div>' );
 		} else if ( 0 === x ) {
 			wp.a11y.speak( wpAjax.broken );
-			return ! re.html( '<div class="notice notice-error"><p>' + wpAjax.broken  + '</p></div>' );
+			return ! re.html( '<div class="notice notice-error" role="alert"><p>' + wpAjax.broken  + '</p></div>' );
 		}
 		return true;
 	},

wp-includes/js/wp-ajax-response.min.js

@@ -1,2 +1,2 @@
 /*! This file is auto-generated */
-window.wpAjax=jQuery.extend({unserialize:function(e){var t,r,i,n,a={};if(e)for(i in r=(e=(t=e.split("?"))[1]?t[1]:e).split("&"))"function"==typeof r.hasOwnProperty&&!r.hasOwnProperty(i)||(a[(n=r[i].split("="))[0]]=n[1]);return a},parseAjaxResponse:function(n,e,a){var o={},e=jQuery("#"+e).empty(),s="",r="";return n&&"object"==typeof n&&n.getElementsByTagName("wp_ajax")?(o.responses=[],o.errors=!1,jQuery("response",n).each(function(){var e=jQuery(this),t=jQuery(this.firstChild),i={action:e.attr("action"),what:t.get(0).nodeName,id:t.attr("id"),oldId:t.attr("old_id"),position:t.attr("position")};i.data=jQuery("response_data",t).text(),i.supplemental={},jQuery("supplemental",t).children().each(function(){"notice"===this.nodeName?r+=jQuery(this).text():i.supplemental[this.nodeName]=jQuery(this).text()}).length||(i.supplemental=!1),i.errors=[],jQuery("wp_error",t).each(function(){var e=jQuery(this).attr("code"),t={code:e,message:this.firstChild.nodeValue,data:!1},r=jQuery('wp_error_data[code="'+e+'"]',n);r&&(t.data=r.get()),(r=jQuery("form-field",r).text())&&(e=r),a&&wpAjax.invalidateForm(jQuery("#"+a+' :input[name="'+e+'"]').parents(".form-field:first")),s+="<p>"+t.message+"</p>",i.errors.push(t),o.errors=!0}).length||(i.errors=!1),o.responses.push(i)}),s.length?(e.html('<div class="notice notice-error">'+s+"</div>"),wp.a11y.speak(s)):r.length&&(e.html('<div class="notice notice-success is-dismissible"><p>'+r+"</p></div>"),jQuery(document).trigger("wp-updates-notice-added"),wp.a11y.speak(r)),o):isNaN(n)?(wp.a11y.speak(n),!e.html('<div class="notice notice-error"><p>'+n+"</p></div>")):-1===(n=parseInt(n,10))?(wp.a11y.speak(wpAjax.noPerm),!e.html('<div class="notice notice-error"><p>'+wpAjax.noPerm+"</p></div>")):0!==n||(wp.a11y.speak(wpAjax.broken),!e.html('<div class="notice notice-error"><p>'+wpAjax.broken+"</p></div>"))},invalidateForm:function(e){return jQuery(e).addClass("form-invalid").find("input").one("change wp-check-valid-field",function(){jQuery(this).closest(".form-invalid").removeClass("form-invalid")})},validateForm:function(e){return e=jQuery(e),!wpAjax.invalidateForm(e.find(".form-required").filter(function(){return""===jQuery("input:visible",this).val()})).length}},wpAjax||{noPerm:"Sorry, you are not allowed to do that.",broken:"Something went wrong."}),jQuery(function(e){e("form.validate").on("submit",function(){return wpAjax.validateForm(e(this))})});
+window.wpAjax=jQuery.extend({unserialize:function(e){var r,t,i,a,n={};if(e)for(i in t=(e=(r=e.split("?"))[1]?r[1]:e).split("&"))"function"==typeof t.hasOwnProperty&&!t.hasOwnProperty(i)||(n[(a=t[i].split("="))[0]]=a[1]);return n},parseAjaxResponse:function(a,e,n){var o={},e=jQuery("#"+e).empty(),s="",t="";return a&&"object"==typeof a&&a.getElementsByTagName("wp_ajax")?(o.responses=[],o.errors=!1,jQuery("response",a).each(function(){var e=jQuery(this),r=jQuery(this.firstChild),i={action:e.attr("action"),what:r.get(0).nodeName,id:r.attr("id"),oldId:r.attr("old_id"),position:r.attr("position")};i.data=jQuery("response_data",r).text(),i.supplemental={},jQuery("supplemental",r).children().each(function(){"notice"===this.nodeName?t+=jQuery(this).text():i.supplemental[this.nodeName]=jQuery(this).text()}).length||(i.supplemental=!1),i.errors=[],jQuery("wp_error",r).each(function(){var e=jQuery(this).attr("code"),r={code:e,message:this.firstChild.nodeValue,data:!1},t=jQuery('wp_error_data[code="'+e+'"]',a);t&&(r.data=t.get()),(t=jQuery("form-field",t).text())&&(e=t),n&&wpAjax.invalidateForm(jQuery("#"+n+' :input[name="'+e+'"]').parents(".form-field:first")),s+="<p>"+r.message+"</p>",i.errors.push(r),o.errors=!0}).length||(i.errors=!1),o.responses.push(i)}),s.length?(e.html('<div class="notice notice-error" role="alert">'+s+"</div>"),wp.a11y.speak(s)):t.length&&(e.html('<div class="notice notice-success is-dismissible" role="alert"><p>'+t+"</p></div>"),jQuery(document).trigger("wp-updates-notice-added"),wp.a11y.speak(t)),o):isNaN(a)?(wp.a11y.speak(a),!e.html('<div class="notice notice-error" role="alert"><p>'+a+"</p></div>")):-1===(a=parseInt(a,10))?(wp.a11y.speak(wpAjax.noPerm),!e.html('<div class="notice notice-error" role="alert"><p>'+wpAjax.noPerm+"</p></div>")):0!==a||(wp.a11y.speak(wpAjax.broken),!e.html('<div class="notice notice-error" role="alert"><p>'+wpAjax.broken+"</p></div>"))},invalidateForm:function(e){return jQuery(e).addClass("form-invalid").find("input").one("change wp-check-valid-field",function(){jQuery(this).closest(".form-invalid").removeClass("form-invalid")})},validateForm:function(e){return e=jQuery(e),!wpAjax.invalidateForm(e.find(".form-required").filter(function(){return""===jQuery("input:visible",this).val()})).length}},wpAjax||{noPerm:"Sorry, you are not allowed to do that.",broken:"Something went wrong."}),jQuery(function(e){e("form.validate").on("submit",function(){return wpAjax.validateForm(e(this))})});

wp-includes/version.php

@@ -16,7 +16,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '6.6-beta3-58454';
+$wp_version = '6.6-beta3-58455';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.