Changeset 61099

Timestamp:

10/30/2025 10:30:18 PM (6 weeks ago)

Author:

joedolson

Message:

Media: A11y: Switch uploader toggle to button and set focus.

The control to switch between the browser uploader and the default uploader used a link with target="_blank", but was driven by scripts. In a no-js context, this meant that the link could be used to open the browser uploader in a new tab. This is unnecessary, however, because the default uploader is not rendered when JS is not available.

On switching uploaders, browser focus was lost.

For more predictable keyboard and screen reader behavior, switch the media uploader toggle to a button element and set focus to the upload button in the new context.

Props dilipbheda, sabernhardt, rollybueno, westonruter, joedolson.
Fixes #63238.

Location:

trunk/src

Files:

• js/_enqueues/vendor/plupload/handlers.js (modified) (2 diffs)
• wp-admin/includes/media.php (modified) (2 diffs)

trunk/src/js/_enqueues/vendor/plupload/handlers.js

@@ -277 +277 @@
         if ( typeof( uploader ) == 'object' )
             uploader.refresh();
+
+        jQuery( '#plupload-browse-button' ).trigger( 'focus' );
     } else {
         setUserSetting( 'uploader', '1' ); // 1 == html uploader.
         jQuery( '.media-upload-form' ).addClass( 'html-uploader' );
+        jQuery( '#async-upload' ).trigger( 'focus' );
     }
 }
@@ -421 +424 @@
                 $( this ).remove();
             } );
-        } else if ( target.is( '.upload-flash-bypass a' ) || target.is( 'a.uploader-html' ) ) { // Switch uploader to html4.
+        } else if ( target.is( '.upload-flash-bypass button' ) || target.is( 'a.uploader-html' ) ) { // Switch uploader to html4.
             $( '#media-items, p.submit, span.big-file-warning' ).css( 'display', 'none' );
             switchUploader( 0 );
             e.preventDefault();
-        } else if ( target.is( '.upload-html-bypass a' ) ) { // Switch uploader to multi-file.
+        } else if ( target.is( '.upload-html-bypass button' ) ) { // Switch uploader to multi-file.
             $( '#media-items, p.submit, span.big-file-warning' ).css( 'display', '' );
             switchUploader( 1 );

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

@@ -3029 +3029 @@
  *
  * @since 2.6.0
- *
- * @global int $post_ID
  */
 function media_upload_flash_bypass() {
-    $browser_uploader = admin_url( 'media-new.php?browser-uploader' );
-
-    $post = get_post();
-    if ( $post ) {
-        $browser_uploader .= '&post_id=' . (int) $post->ID;
-    } elseif ( ! empty( $GLOBALS['post_ID'] ) ) {
-        $browser_uploader .= '&post_id=' . (int) $GLOBALS['post_ID'];
-    }
-
     ?>
     <p class="upload-flash-bypass">
     <?php
         printf(
-            /* translators: 1: URL to browser uploader, 2: Additional link attributes. */
-            __( 'You are using the multi-file uploader. Problems? Try the <a href="%1$s" %2$s>browser uploader</a> instead.' ),
-            $browser_uploader,
-            'target="_blank"'
+            /* translators: %s: HTML attributes for button. */
+            __( 'You are using the multi-file uploader. Problems? Try the <button %s>browser uploader</button> instead.' ),
+            'type="button" class="button-link"'
         );
     ?>
@@ -3064 +3052 @@
     ?>
     <p class="upload-html-bypass hide-if-no-js">
-        <?php _e( 'You are using the browser&#8217;s built-in file uploader. The WordPress uploader includes multiple file selection and drag and drop capability. <a href="#">Switch to the multi-file uploader</a>.' ); ?>
+    <?php
+        printf(
+            /* translators: %s: HTML attributes for button. */
+            __( 'You are using the browser&#8217;s built-in file uploader. The WordPress uploader includes multiple file selection and drag and drop capability. <button %s>Switch to the multi-file uploader</button>.' ),
+            'type="button" class="button-link"'
+        );
+    ?>
     </p>
     <?php