Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-09-24 13:22:49 +02:00
Code Issues Projects Releases Wiki Activity

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

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

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


Built from https://develop.svn.wordpress.org/trunk@52059


git-svn-id: http://core.svn.wordpress.org/trunk@51651 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
antpb 2021-11-08 22:49:00 +00:00
parent d00b86ff06
commit 975f56e42b
9 changed files with 26 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
wp-admin/includes/media.php
View File

@ -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"><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>
<?php
@ -2288,7 +2288,7 @@ function media_upload_form( $errors = null ) {
?>
</div>
<p class="max-upload-size">
<p class="max-upload-size" id="post-upload-info">
<?php
/* translators: %s: Maximum allowed file size. */
printf( __( 'Maximum upload file size: %s.' ), esc_html( size_format( $max_upload_size ) ) );

3
wp-includes/css/buttons-rtl.css
View File

@ -134,6 +134,9 @@ 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 {

2
wp-includes/css/buttons-rtl.min.css vendored
View File

File diff suppressed because one or more lines are too long

3
wp-includes/css/buttons.css
View File

@ -133,6 +133,9 @@ 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 {

2
wp-includes/css/buttons.min.css vendored
View File

File diff suppressed because one or more lines are too long

15
wp-includes/js/media-views.js
View File

@ -2858,16 +2858,21 @@ UploaderInline = View.extend(/** @lends wp.media.view.UploaderInline.prototype *
$placeholder;
if ( this.controller.uploader ) {
$placeholder = this.$('.browser');
$placeholder = this.$('.browser-container');
// Check if we've already replaced the placeholder.
if ( $placeholder[0] === $browser[0] ) {
return;
}
$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() );
}
@ -6334,7 +6339,7 @@ UploaderWindow = wp.media.View.extend(/** @lends wp.media.view.UploaderWindow.pr
initialize: function() {
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 || {}, {
dropzone: this.$el,

2
wp-includes/js/media-views.min.js vendored
View File

File diff suppressed because one or more lines are too long

5
wp-includes/media-template.php
View File

@ -252,7 +252,10 @@ 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>
<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>
<div class="upload-inline-status"></div>

2
wp-includes/version.php
View File

@ -16,7 +16,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.9-alpha-52058';
$wp_version = '5.9-alpha-52059';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.