From 4e4837d9b1acd2581c8af2ac1df961a69cd539a1 Mon Sep 17 00:00:00 2001
From: Joe Dolson <joedolson@git.wordpress.org>
Date: Tue, 16 Feb 2021 04:03:37 +0000
Subject: [PATCH] Media: Associate upload errors and field with controls.

Adds an explicit relationship between the upload button and the maximum upload limit, moves focus to the error dismiss button if an error occurs, and adds a call to wp.a11y.speak to report the error after it occurs.

Props afercia, anevins, antpb, adamsilverstein, poena
Fixes #47120

git-svn-id: https://develop.svn.wordpress.org/trunk@50352 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/js/media/views/uploader/inline.js | 1 +
 src/js/media/views/uploader/status.js | 6 ++++++
 src/wp-includes/media-template.php    | 4 ++--
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/js/media/views/uploader/inline.js b/src/js/media/views/uploader/inline.js
index bd2cff0dcc..c6bc5fa068 100644
--- a/src/js/media/views/uploader/inline.js
+++ b/src/js/media/views/uploader/inline.js
@@ -115,6 +115,7 @@ UploaderInline = View.extend(/** @lends wp.media.view.UploaderInline.prototype *
 
 			$browser.detach().text( $placeholder.text() );
 			$browser[0].className = $placeholder[0].className;
+			$browser[0].setAttribute( 'aria-labelledby', $browser[0].id + ' ' + $placeholder[0].getAttribute('aria-labelledby') );
 			$placeholder.replaceWith( $browser.show() );
 		}
 
diff --git a/src/js/media/views/uploader/status.js b/src/js/media/views/uploader/status.js
index 0be6f15f5d..a21c278395 100644
--- a/src/js/media/views/uploader/status.js
+++ b/src/js/media/views/uploader/status.js
@@ -116,8 +116,14 @@ UploaderStatus = View.extend(/** @lends wp.media.view.UploaderStatus.prototype *
 			message:  error.get( 'message' )
 		} );
 
+		var buttonClose = this.$el.find( 'button' );
+
 		// Can show additional info here while retrying to create image sub-sizes.
 		this.views.add( '.upload-errors', statusError, { at: 0 } );
+		_.delay( function() {
+			buttonClose.trigger( 'focus' );
+			wp.a11y.speak( error.get( 'message' ), 'assertive' );
+		}, 1000 );
 	},
 
 	dismiss: function() {
diff --git a/src/wp-includes/media-template.php b/src/wp-includes/media-template.php
index 2b887c475a..70e1995707 100644
--- a/src/wp-includes/media-template.php
+++ b/src/wp-includes/media-template.php
@@ -252,12 +252,12 @@ function wp_print_media_templates() {
 			<div class="upload-ui">
 				<h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files to upload' ); ?></h2>
 				<p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
-				<button type="button" class="browser button button-hero"><?php _e( 'Select Files' ); ?></button>
+				<button type="button" class="browser button button-hero" aria-labelledby="post-upload-info"><?php _e( 'Select Files' ); ?></button>
 			</div>
 
 			<div class="upload-inline-status"></div>
 
-			<div class="post-upload-ui">
+			<div class="post-upload-ui" id="post-upload-info">
 				<?php
 				/** This action is documented in wp-admin/includes/media.php */
 				do_action( 'pre-upload-ui' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores