Changeset 60786

Timestamp:

09/19/2025 08:52:52 PM (15 hours ago)

Author:

joedolson

Message:

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.

Location:

trunk/src

Files:

• wp-admin/includes/media.php (modified) (1 diff)
• wp-includes/media-template.php (modified) (1 diff)

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

@@ -656 +656 @@
 
     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 ),

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

@@ -196 +196 @@
     <?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">