Changeset 52059

Timestamp:

11/08/2021 10:47:09 PM (3 years ago)

Author:

antpb

Message:

Media: Change upload button to a file input for better e2e targeting.

Changes the media library upload button to input type="file" for better end to end testing capabilities.

Props justinahinon, joedolson, sabernhardt, audrasjb.
Fixes #54168.

Location:

trunk/src

Files:

• js/media/views/uploader/inline.js (modified) (2 diffs)
• js/media/views/uploader/window.js (modified) (1 diff)
• wp-admin/includes/media.php (modified) (2 diffs)
• wp-includes/css/buttons.css (modified) (1 diff)
• wp-includes/media-template.php (modified) (1 diff)

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

@@ -107 +107 @@
 
         if ( this.controller.uploader ) {
-            $placeholder = this.$('.browser');
+            $placeholder = this.$('.browser-container');
 
             // Check if we've already replaced the placeholder.
@@ -114 +114 @@
             }
 
-            $browser.detach().text( $placeholder.text() );
-            $browser[0].className = $placeholder[0].className;
-            $browser[0].setAttribute( 'aria-labelledby', $browser[0].id + ' ' + $placeholder[0].getAttribute('aria-labelledby') );
+            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 );
             $placeholder.replaceWith( $browser.show() );
         }

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

@@ -28 +28 @@
         var uploader;
 
-        this.$browser = $( '<button type="button" class="browser" />' ).hide().appendTo( 'body' );
+        this.$browser = $( '<div class="browser-container">' ).hide().appendTo( 'body' );
 
         uploader = this.options.uploader = _.defaults( this.options.uploader || {}, {

trunk/src/wp-admin/includes/media.php

@@ -2247 +2247 @@
         <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"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e( 'Select Files' ); ?>" class="button" /></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>
         </div>
     </div>
@@ -2289 +2289 @@
     </div>
 
-<p class="max-upload-size">
+<p class="max-upload-size" id="post-upload-info">
     <?php
     /* translators: %s: Maximum allowed file size. */

trunk/src/wp-includes/css/buttons.css

@@ -134 +134 @@
 }
 
+/* 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,

trunk/src/wp-includes/media-template.php

@@ -253 +253 @@
                 <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" aria-labelledby="post-upload-info"><?php _e( 'Select Files' ); ?></button>
+                <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>
             </div>