Accessibility: Media: Hide the invisible "file input" on media views from assistive technologies.

The file input button is visually hidden, but was announced by screen readers in workflows unrelated to file uploads.
It is now hidden from assistive technologies by the means of an `aria-hidden` attribute, as its CSS display property must not be changed to make sure it still works on old browsers.

See #49753.
Fixes #47611.


git-svn-id: https://develop.svn.wordpress.org/trunk@47834 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Andrea Fercia 2020-05-20 13:31:32 +00:00
parent ea99b194dc
commit cdd8b92ea6
1 changed files with 12 additions and 7 deletions

View File

@ -120,8 +120,7 @@ window.wp = window.wp || {};
* @param {plupload.File} file File that was uploaded.
*/
tryAgain = function( message, data, file ) {
var times;
var id;
var times, id;
if ( ! data || ! data.responseHeaders ) {
error( pluploadL10n.http_error_image, data, file, 'no-retry' );
@ -210,8 +209,8 @@ window.wp = window.wp || {};
* @param {string} retry Whether to try again to create image sub-sizes. Passing 'no-retry' will prevent it.
*/
error = function( message, data, file, retry ) {
var isImage = file.type && file.type.indexOf( 'image/' ) === 0;
var status = data && data.status;
var isImage = file.type && file.type.indexOf( 'image/' ) === 0,
status = data && data.status;
// If the file is an image and the error is HTTP 5xx try to create sub-sizes again.
if ( retry !== 'no-retry' && isImage && status >= 500 && status < 600 ) {
@ -327,10 +326,16 @@ window.wp = window.wp || {};
this.browser.on( 'mouseenter', this.refresh );
} else {
this.uploader.disableBrowse( true );
// If HTML5 mode, hide the auto-created file container.
$('#' + this.uploader.id + '_html5_container').hide();
}
$( self ).on( 'uploader:ready', function() {
$( '.moxie-shim-html5 input[type="file"]' )
.attr( {
tabIndex: '-1',
'aria-hidden': 'true'
} );
} );
/**
* After files were filtered and added to the queue, create a model for each.
*
@ -521,7 +526,7 @@ window.wp = window.wp || {};
/*
* If the browser node is not attached to the DOM,
* use a temporary container to house it, as the browser button shims
* use a temporary container to house it, as the browser button shims
* require the button to exist in the DOM at all times.
*/
if ( ! attached ) {