Changeset 64241 for trunk/src/wp-includes/media-template.php

Timestamp:

10/08/2026 11:33:48 AM (9 days ago)

Author:

afercia

Message:

Administration: Improve focus management and screen reader announcements when navigating the media and theme browsers.

In the various media and theme browsers, the announcements for screen readers were sometimes too noisy because focus was set too often and unnecessarily on some elements. To improve the announcements and move focus only when really necessary, all the media and theme browsers are now standardized to the following pattern:

• Makes sure all the media and theme browsers have a dialog role.
• Keeps the navigation buttons focusable by using aria-disabled instead of disabled.
• Ensures that screen reader announcements are cleaner by keeping focus on the activated control rather than moving it to another element.
• Makes sure initial focus is set to the dialog element when it is opened.
• Makes sure to return focus to the opener control when the dialog is closed.
• Makes sure the opener control is a focusable element.
• Adjusts styles accordingly to take the aria-disabled attribute into account.
• Simplifies the buttons accessible name to: Previous / Next / Close.
• Makes sure the ARIA live regions are not hidden when they inherit visibility: hidden.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/13816

Props sukhendu2002, khokansardar, afercia.
Fixes #65746.

File:

• trunk/src/wp-includes/media-template.php (modified) (2 diffs)

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

@@ -207 +207 @@
                                         <?php
                                         /* translators: Hidden accessibility text. */
-                                        _e( 'Close dialog' );
+                                        _e( 'Close' );
                                         ?>
                                 </span></button>
@@ -370 +370 @@
         <script type="text/html" id="tmpl-edit-attachment-frame">
                 <div class="edit-media-header">
-                        <button class="left dashicons"<# if ( ! data.hasPrevious ) { #> disabled<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Edit previous media item' ); ?></span></button>
-                        <button class="right dashicons"<# if ( ! data.hasNext ) { #> disabled<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _e( 'Edit next media item' ); ?></span></button>
-                        <button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text"><?php _e( 'Close dialog' ); ?></span></button>
+                        <button class="left dashicons"<# if ( ! data.hasPrevious ) { #> aria-disabled='true'<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _ex( 'Previous', 'media item' ); ?></span></button>
+                        <button class="right dashicons"<# if ( ! data.hasNext ) { #> aria-disabled='true'<# } #>><span class="screen-reader-text"><?php /* translators: Hidden accessibility text. */ _ex( 'Next', 'media item' ); ?></span></button>
+                        <button type="button" class="media-modal-close"><span class="media-modal-icon" aria-hidden="true"></span><span class="screen-reader-text"><?php _e( 'Close' ); ?></span></button>
                 </div>
                 <div class="media-frame-title"></div>