Make WordPress Core

Changeset 52171


Ignore:
Timestamp:
11/15/2021 11:20:20 PM (19 months ago)
Author:
joedolson
Message:

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.

Location:
trunk/src
Files:
25 edited

Legend:

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

    r52059 r52171  
    107107
    108108        if ( this.controller.uploader ) {
    109             $placeholder = this.$('.browser-container');
     109            $placeholder = this.$('.browser');
    110110
    111111            // Check if we've already replaced the placeholder.
     
    114114            }
    115115
    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 );
     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') );
    124119            $placeholder.replaceWith( $browser.show() );
    125120        }
  • trunk/src/js/media/views/uploader/window.js

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

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

    r52059 r52171  
    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,
    139136.wp-core-ui .button.focus,
    140137.wp-core-ui .button:focus,
  • trunk/src/wp-includes/media-template.php

    r52059 r52171  
    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                 <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>
     255                <button type="button" class="browser button button-hero" aria-labelledby="post-upload-info"><?php _e( 'Select Files' ); ?></button>
    259256            </div>
    260257
Note: See TracChangeset for help on using the changeset viewer.