Changeset 64282 for trunk/src/js/_enqueues/admin/common.js

Timestamp:

10/10/2026 02:18:37 PM (4 days ago)

Author:

joedolson

Message:

Admin: Admin notice accessibility improvements.

Capture all admin notices with message content generated via wp_get_admin_notices(). Wrap all captured notices inside an aside so notices are identified within a navigable landmark. Add information about the number of notices produced on a page in the title element of the page.

Ensures users have awareness on page entry whether there are notices present, how many there are, and provides screen readers with a mechanism to locate them as a group. Inline notices are counted in the total, but not contained within the landmark.

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

Props afercia, psykro, ryokuhi, raaaahman, alexstine, sergeybiryukov, oglekler, marybaum, swissspidy, davidbaumwald, sanket.parmar, sabernhardt, peterwilsoncc, williampatton, im3dabasia1, audrasjb, khokansardar, ugyensupport, joedolson.
Fixes #50486.

File:

• trunk/src/js/_enqueues/admin/common.js (modified) (3 diffs)

trunk/src/js/_enqueues/admin/common.js

@@ -1076 +1076 @@
         }
 
-        /*
-         * The `.below-h2` class is here just for backward compatibility with plugins
-         * that are (incorrectly) using it. Do not use. Use `.inline` instead. See #34570.
-         * If '.wp-header-end' is found, append the notices after it otherwise
-         * after the first h1 or h2 heading found within the main content.
-         */
-        if ( ! $headerEnd.length ) {
-                $headerEnd = $( '.wrap h1, .wrap h2' ).first();
-        }
-        $( 'div.updated, div.error, div.notice' ).not( '.inline, .below-h2' ).insertAfter( $headerEnd );
-
         /**
          * Makes notices dismissible.
@@ -1525 +1514 @@
                 input.on('change', toggleUploadButton);
         })();
+
+        /**
+         * Moves the admin notices into an `aside` element after the first `h1`.
+         * Prior to 7.2.0, admin notices were only moved after the first `h1`;
+         * The `aside` wrapper was added in 7.2.0.
+         *
+         * @since 7.2.0
+         *
+         * @return {void}
+         */
+        function moveAdminNotices() {
+                /*
+                 * The `.below-h2` class is here just for backward compatibility with plugins
+                 * that are (incorrectly) using it. Do not use. Use `.inline` instead. See #34570.
+                 * If '.wp-header-end' is found, append the notices after it otherwise
+                 * after the first h1 or h2 heading found within the main content.
+                 */
+                if ( ! $headerEnd.length ) {
+                        $headerEnd = $( '.wrap h1, .wrap h2' ).first();
+                }
+                const $notices = $( 'div.updated, div.error, div.notice' ).not( '.inline, .below-h2' );
+                if ( $notices.length ) {
+                        const $wpAdminNotices = $( '<aside id="wp-admin-notices"></aside>' ).attr( 'aria-label', __( 'Admin Notices' ) ).insertAfter( $headerEnd );
+                        $notices.appendTo( $wpAdminNotices );
+                }
+        }
 
         /**
@@ -2128 +2143 @@
 
         window.wpResponsive.init();
+        moveAdminNotices();
         setPinMenu();
         setMenuState();