Editor: A11y: Set aria-haspopup on Add Media button.

Add the `aria-haspopup` attribute and `aria-controls` on the Add Media button in the classic editor, so that screen reader users are notified about the behavior of the button.

Props alh0319, rishabhwp, joedolson.
Fixes #63973.

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

Author: joedolson

src/wp-admin/includes/media.php

@@ -655,7 +655,7 @@ function media_buttons( $editor_id = 'content' ) {
 	$id_attribute = 1 === $instance ? ' id="insert-media-button"' : '';
 
 	printf(
-		'<button type="button"%s class="button insert-media add_media" data-editor="%s">%s</button>',
+		'<button type="button"%s class="button insert-media add_media" data-editor="%s" aria-haspopup="dialog" aria-controls="wp-media-modal">%s</button>',
 		$id_attribute,
 		esc_attr( $editor_id ),
 		$img . __( 'Add Media' )

src/wp-includes/media-template.php

@@ -195,7 +195,7 @@ function wp_print_media_templates() {
 
 	<?php // Template for the media modal. ?>
 	<script type="text/html" id="tmpl-media-modal">
-		<div tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-labelledby="media-frame-title">
+		<div id="wp-media-modal" tabindex="0" class="<?php echo $class; ?>" role="dialog" aria-labelledby="media-frame-title">
 			<# if ( data.hasCloseButton ) { #>
 				<button type="button" class="media-modal-close"><span class="media-modal-icon"><span class="screen-reader-text">
 					<?php