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.

git-svn-id: https://develop.svn.wordpress.org/trunk@61099 602fd350-edb4-49c9-b593-d223f7449a82

Author: joedolson

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

@@ -276,9 +276,12 @@ function switchUploader( s ) {
 
 		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' );
 	}
 }
 
@@ -420,11 +423,11 @@ jQuery( document ).ready( function( $ ) {
 			target.parents( '.media-item' ).fadeOut( 200, function() {
 				$( 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 );
 			e.preventDefault();

src/wp-admin/includes/media.php

@@ -3028,27 +3028,15 @@ function wp_media_insert_url_form( $default_view = 'image' ) {
  * Displays the multi-file uploader message.
  *
  * @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"'
 		);
 	?>
 	</p>
@@ -3063,7 +3051,13 @@ function media_upload_flash_bypass() {
 function media_upload_html_bypass() {
 	?>
 	<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
 }