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
This commit is contained in:
Joe Dolson
2021-02-16 04:03:37 +00:00
parent d9ceb1c434
commit 4e4837d9b1
3 changed files with 9 additions and 2 deletions

View File

@@ -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() );
}

View File

@@ -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() {

View File

@@ -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