Changeset 64241 for trunk/src/wp-admin/css/media.css

Timestamp:

10/08/2026 11:33:48 AM (10 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-admin/css/media.css (modified) (2 diffs)

trunk/src/wp-admin/css/media.css

@@ -726 +726 @@
 .edit-attachment-frame .edit-media-header .left:focus,
 .edit-attachment-frame .edit-media-header .right:focus {
-        /* Only visible in Windows High Contrast mode */
-        outline: 2px solid transparent;
-        outline-offset: -2px;
+        /* Always visible also in Windows High Contrast mode */
+        outline: 1px solid #c3c4c7;;
+        outline-offset: -1px;
 }
 
@@ -746 +746 @@
 }
 
-.edit-attachment-frame .edit-media-header [disabled],
-.edit-attachment-frame .edit-media-header [disabled]:hover {
+.edit-attachment-frame .edit-media-header [aria-disabled="true"],
+.edit-attachment-frame .edit-media-header [aria-disabled="true"]:hover,
+.edit-attachment-frame .edit-media-header [aria-disabled="true"]:focus {
         color: #c3c4c7;
         background: inherit;