Media: Screen reader improvements for upload media errors.

Add a screen reader announcement when a media upload fails. Also add an announcement when dismissing upload errors, and improve the labeling context of the dismiss error button to explicitly identify which error will be dismissed.

Props joedolson, navi161, yogeshbhutkar, rishavdutta.
Fixes #63114.

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

Author: joedolson

src/js/media/views/uploader/status.js

@@ -124,8 +124,11 @@ UploaderStatus = View.extend(/** @lends wp.media.view.UploaderStatus.prototype *
 		this.views.add( '.upload-errors', statusError, { at: 0 } );
 		_.delay( function() {
 			buttonClose.trigger( 'focus' );
-			wp.a11y.speak( error.get( 'message' ), 'assertive' );
 		}, 1000 );
+
+		_.delay( function() {
+			wp.a11y.speak( error.get( 'message' ) );
+		}, 1500 );
 	},
 
 	dismiss: function() {
@@ -135,6 +138,7 @@ UploaderStatus = View.extend(/** @lends wp.media.view.UploaderStatus.prototype *
 			_.invoke( errors, 'remove' );
 		}
 		wp.Uploader.errors.reset();
+		wp.a11y.speak( wp.i18n.__( 'Error dismissed.' ) );
 		// Move focus to the modal after the dismiss button gets removed from the DOM.
 		if ( this.controller.modal ) {
 			this.controller.modal.focusManager.focus();

src/wp-admin/async-upload.php

@@ -112,12 +112,14 @@
 
 $id = media_handle_upload( 'async-upload', $post_id );
 if ( is_wp_error( $id ) ) {
-	$button_unique_id = uniqid( 'dismiss-' );
-	$message          = sprintf(
+	$button_unique_id     = uniqid( 'dismiss-' );
+	$error_description_id = uniqid( 'error-description-' );
+	$message              = sprintf(
 		'%s <strong>%s</strong><br />%s',
 		sprintf(
-			'<button type="button" id="%s" class="dismiss button-link">%s</button>',
+			'<button type="button" id="%1$s" class="dismiss button-link" aria-describedby="%2$s">%3$s</button>',
 			esc_attr( $button_unique_id ),
+			esc_attr( $error_description_id ),
 			__( 'Dismiss' )
 		),
 		sprintf(
@@ -127,14 +129,23 @@
 		),
 		esc_html( $id->get_error_message() )
 	);
+
 	wp_admin_notice(
 		$message,
 		array(
+			'id'                 => $error_description_id,
 			'additional_classes' => array( 'error-div', 'error' ),
 			'paragraph_wrap'     => false,
 		)
 	);
-	echo "<script>jQuery( 'button#{$button_unique_id}' ).on( 'click', function() {jQuery(this).parents('div.media-item').slideUp(200, function(){jQuery(this).remove();})});</script>\n";
+
+	$speak_message = sprintf(
+		/* translators: %s: Name of the file that failed to upload. */
+		__( '%s has failed to upload.' ),
+		esc_js( $_FILES['async-upload']['name'] )
+	);
+
+	echo "<script>_.delay(function() {wp.a11y.speak('" . esc_js( $speak_message ) . "');}, 1500);jQuery( 'button#{$button_unique_id}' ).on( 'click', function() {jQuery(this).parents('div.media-item').slideUp(200, function(){jQuery(this).remove();wp.a11y.speak( wp.i18n.__( 'Error dismissed.' ) );jQuery( '#plupload-browse-button' ).trigger( 'focus' );})});</script>\n";
 	exit;
 }