Media: Revert media uploader input change in [52059].

Based on follow-up research, this change was never necessary in order to use e2e tests in the media library uploader. Additionally, it created several complicated side effects. Without significant benefit, it's not valuable to pursue the change further.

Follow up to [52059].

See #54168, #54411.
Fixes #54168.

git-svn-id: https://develop.svn.wordpress.org/trunk@52171 602fd350-edb4-49c9-b593-d223f7449a82

src/js/media/views/uploader/inline.js

@@ -106,21 +106,16 @@ UploaderInline = View.extend(/** @lends wp.media.view.UploaderInline.prototype *
 			$placeholder;
 
 		if ( this.controller.uploader ) {
-			$placeholder = this.$('.browser-container');
+			$placeholder = this.$('.browser');
 
 			// Check if we've already replaced the placeholder.
 			if ( $placeholder[0] === $browser[0] ) {
 				return;
 			}
 
-			var browserLabel = $placeholder.find( 'label' );
-			var browserInput = $placeholder.find( 'input' );
-
-			browserLabel.attr( 'for', $browser[0].id );
-			browserInput.attr( 'id', $browser[0].id );
-			$browser.removeAttr( 'id' );
-
-			$browser.append( browserLabel ).append( browserInput );
+			$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() );
 		}
 

src/js/media/views/uploader/window.js

@@ -27,7 +27,7 @@ UploaderWindow = wp.media.View.extend(/** @lends wp.media.view.UploaderWindow.pr
 	initialize: function() {
 		var uploader;
 
-		this.$browser = $( '<div class="browser-container">' ).hide().appendTo( 'body' );
+		this.$browser = $( '<button type="button" class="browser" />' ).hide().appendTo( 'body' );
 
 		uploader = this.options.uploader = _.defaults( this.options.uploader || {}, {
 			dropzone:  this.$el,

src/wp-admin/includes/media.php

@@ -2246,7 +2246,7 @@ function media_upload_form( $errors = null ) {
 		<div class="drag-drop-inside">
 		<p class="drag-drop-info"><?php _e( 'Drop files to upload' ); ?></p>
 		<p><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
-		<p class="drag-drop-buttons"><label for="plupload-browse-button" id="plupload-browse-label" class="button button-hero"><?php esc_html_e( 'Select Files' ); ?></label><input id="plupload-browse-button" type="file" class="screen-reader-text" aria-labelledby="plupload-browse-label post-upload-info" /></p>
+		<p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e( 'Select Files' ); ?>" class="button" /></p>
 		</div>
 	</div>
 	<?php
@@ -2288,7 +2288,7 @@ function media_upload_form( $errors = null ) {
 	?>
 	</div>
 
-<p class="max-upload-size" id="post-upload-info">
+<p class="max-upload-size">
 	<?php
 	/* translators: %s: Maximum allowed file size. */
 	printf( __( 'Maximum upload file size: %s.' ), esc_html( size_format( $max_upload_size ) ) );

src/wp-includes/css/buttons.css

@@ -133,9 +133,6 @@ TABLE OF CONTENTS:
 	color: #0a4b78;
 }
 
-/* Support focus state on label designed as button in media uploader. */
-.drag-drop-inside p.drag-drop-buttons:focus-within label.button,
-.uploader-inline-content div.browser-container:focus-within label.button,
 .wp-core-ui .button.focus,
 .wp-core-ui .button:focus,
 .wp-core-ui .button-secondary:focus {

src/wp-includes/media-template.php

@@ -252,10 +252,7 @@ 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>
-				<div class="browser-container">
-					<label class="button button-hero"><?php esc_html_e( 'Select Files' ); ?></label>
-					<input type="file" class="browser screen-reader-text" aria-describedby="post-upload-info">
-				</div>
+				<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>