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

afercia · afercia · commit cdd8b92ea6ab · 2020-05-20T13:31:32.000Z
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
diff --git a/src/js/_enqueues/vendor/plupload/wp-plupload.js b/src/js/_enqueues/vendor/plupload/wp-plupload.js
@@ -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 ) {
