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
Built from https://develop.svn.wordpress.org/trunk@50352


git-svn-id: http://core.svn.wordpress.org/trunk@49963 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
joedolson 2021-02-16 04:05:07 +00:00
parent 147852757c
commit 7b5e14e987
4 changed files with 11 additions and 4 deletions

View File

@ -5456,6 +5456,7 @@ UploaderInline = View.extend(/** @lends wp.media.view.UploaderInline.prototype *
$browser.detach().text( $placeholder.text() ); $browser.detach().text( $placeholder.text() );
$browser[0].className = $placeholder[0].className; $browser[0].className = $placeholder[0].className;
$browser[0].setAttribute( 'aria-labelledby', $browser[0].id + ' ' + $placeholder[0].getAttribute('aria-labelledby') );
$placeholder.replaceWith( $browser.show() ); $placeholder.replaceWith( $browser.show() );
} }
@ -5605,8 +5606,14 @@ UploaderStatus = View.extend(/** @lends wp.media.view.UploaderStatus.prototype *
message: error.get( 'message' ) message: error.get( 'message' )
} ); } );
var buttonClose = this.$el.find( 'button' );
// Can show additional info here while retrying to create image sub-sizes. // Can show additional info here while retrying to create image sub-sizes.
this.views.add( '.upload-errors', statusError, { at: 0 } ); this.views.add( '.upload-errors', statusError, { at: 0 } );
_.delay( function() {
buttonClose.trigger( 'focus' );
wp.a11y.speak( error.get( 'message' ), 'assertive' );
}, 1000 );
}, },
dismiss: function() { dismiss: function() {

File diff suppressed because one or more lines are too long

View File

@ -252,12 +252,12 @@ function wp_print_media_templates() {
<div class="upload-ui"> <div class="upload-ui">
<h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files to upload' ); ?></h2> <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> <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>
<div class="upload-inline-status"></div> <div class="upload-inline-status"></div>
<div class="post-upload-ui"> <div class="post-upload-ui" id="post-upload-info">
<?php <?php
/** This action is documented in wp-admin/includes/media.php */ /** This action is documented in wp-admin/includes/media.php */
do_action( 'pre-upload-ui' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores do_action( 'pre-upload-ui' ); // phpcs:ignore WordPress.NamingConventions.ValidHookName.UseUnderscores

View File

@ -13,7 +13,7 @@
* *
* @global string $wp_version * @global string $wp_version
*/ */
$wp_version = '5.7-beta2-50351'; $wp_version = '5.7-beta2-50352';
/** /**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema. * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.