WordPress.org

Make WordPress Core

Changeset 52059


Ignore:
Timestamp:
11/08/2021 10:47:09 PM (4 weeks 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:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/js/media/views/uploader/inline.js

    r50547 r52059  
    107107
    108108        if ( this.controller.uploader ) {
    109             $placeholder = this.$('.browser');
     109            $placeholder = this.$('.browser-container');
    110110
    111111            // Check if we've already replaced the placeholder.
     
    114114            }
    115115
    116             $browser.detach().text( $placeholder.text() );
    117             $browser[0].className = $placeholder[0].className;
    118             $browser[0].setAttribute( 'aria-labelledby', $browser[0].id + ' ' + $placeholder[0].getAttribute('aria-labelledby') );
     116            var browserLabel = $placeholder.find( 'label' );
     117            var browserInput = $placeholder.find( 'input' );
     118
     119            browserLabel.attr( 'for', $browser[0].id );
     120            browserInput.attr( 'id', $browser[0].id );
     121            $browser.removeAttr( 'id' );
     122
     123            $browser.append( browserLabel ).append( browserInput );
    119124            $placeholder.replaceWith( $browser.show() );
    120125        }
  • trunk/src/js/media/views/uploader/window.js

    r43309 r52059  
    2828        var uploader;
    2929
    30         this.$browser = $( '<button type="button" class="browser" />' ).hide().appendTo( 'body' );
     30        this.$browser = $( '<div class="browser-container">' ).hide().appendTo( 'body' );
    3131
    3232        uploader = this.options.uploader = _.defaults( this.options.uploader || {}, {
  • trunk/src/wp-admin/includes/media.php

    r52033 r52059  
    22472247        <p class="drag-drop-info"><?php _e( 'Drop files to upload' ); ?></p>
    22482248        <p><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
    2249         <p class="drag-drop-buttons"><input id="plupload-browse-button" type="button" value="<?php esc_attr_e( 'Select Files' ); ?>" class="button" /></p>
     2249        <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>
    22502250        </div>
    22512251    </div>
     
    22892289    </div>
    22902290
    2291 <p class="max-upload-size">
     2291<p class="max-upload-size" id="post-upload-info">
    22922292    <?php
    22932293    /* translators: %s: Maximum allowed file size. */
  • trunk/src/wp-includes/css/buttons.css

    r50278 r52059  
    134134}
    135135
     136/* Support focus state on label designed as button in media uploader. */
     137.drag-drop-inside p.drag-drop-buttons:focus-within label.button,
     138.uploader-inline-content div.browser-container:focus-within label.button,
    136139.wp-core-ui .button.focus,
    137140.wp-core-ui .button:focus,
  • trunk/src/wp-includes/media-template.php

    r52033 r52059  
    253253                <h2 class="upload-instructions drop-instructions"><?php _e( 'Drop files to upload' ); ?></h2>
    254254                <p class="upload-instructions drop-instructions"><?php _ex( 'or', 'Uploader: Drop files here - or - Select Files' ); ?></p>
    255                 <button type="button" class="browser button button-hero" aria-labelledby="post-upload-info"><?php _e( 'Select Files' ); ?></button>
     255                <div class="browser-container">
     256                    <label class="button button-hero"><?php esc_html_e( 'Select Files' ); ?></label>
     257                    <input type="file" class="browser screen-reader-text" aria-describedby="post-upload-info">
     258                </div>
    256259            </div>
    257260
Note: See TracChangeset for help on using the changeset viewer.