Changeset 58449

Timestamp:

06/20/2024 07:39:50 PM (2 years ago)

Author:

joedolson

Message:

Administration: A11y: Use aria-haspopup only if item has popup behavior.

Update behavior of admin menu so that the aria-haspopup attribute is only applied in responsive mode, when there is a popup behavior present. Add aria-expanded attributes to report current popup state.

Props afercia, khokansardar, ryokuhi, joedolson.
Fixes #43095.

Location:

trunk/src

Files:

• js/_enqueues/admin/common.js (modified) (6 diffs)
• wp-admin/menu-header.php (modified) (1 diff)

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

@@ -904 +904 @@
 
         /**
-         * Handles the `aria-haspopup` attribute on the current menu item when it has a submenu.
-         *
-         * @since 4.4.0
-         *
-         * @return {void}
-         */
-        function currentMenuItemHasPopup() {
-                var $current = $( 'a.wp-has-current-submenu' );
-
-                if ( 'folded' === menuState ) {
-                        // When folded or auto-folded and not responsive view, the current menu item does have a fly-out sub-menu.
-                        $current.attr( 'aria-haspopup', 'true' );
-                } else {
-                        // When expanded or in responsive view, reset aria-haspopup.
-                        $current.attr( 'aria-haspopup', 'false' );
-                }
-        }
-
-        $document.on( 'wp-menu-state-set wp-collapse-menu wp-responsive-activate wp-responsive-deactivate', currentMenuItemHasPopup );
-
-        /**
          * Ensures an admin submenu is within the visual viewport.
          *
@@ -1696 +1675 @@
                         $document.on( 'wp-responsive-activate.wp-responsive', function() {
                                 self.activate();
+                                self.toggleAriaHasPopup( 'add' );
                         }).on( 'wp-responsive-deactivate.wp-responsive', function() {
                                 self.deactivate();
+                                self.toggleAriaHasPopup( 'remove' );
                         });
 
@@ -1749 +1730 @@
                                                         var focusIsInToggle  = $.contains( toggleButton, focusedElement );
                                                         var focusIsInSidebar = $.contains( sidebar, focusedElement );
-                                                        
+
                                                         if ( ! focusIsInToggle && ! focusIsInSidebar ) {
                                                                 $( toggleButton ).trigger( 'click.wp-responsive' );
@@ -1763 +1744 @@
                                         return;
                                 }
-
+                                let state = ( 'false' === $( this ).attr( 'aria-expanded' ) ) ? 'true' : 'false';
                                 $( this ).parent( 'li' ).toggleClass( 'selected' );
+                                $( this ).attr( 'aria-expanded', state );
                                 $( this ).trigger( 'focus' );
                                 event.preventDefault();
@@ -1836 +1818 @@
 
                         this.maybeDisableSortables();
+                },
+
+                /**
+                 * Toggles the aria-haspopup attribute for the responsive admin menu.
+                 *
+                 * The aria-haspopup attribute is only necessary for the responsive menu.
+                 * See ticket https://core.trac.wordpress.org/ticket/43095
+                 *
+                 * @since 6.6.0
+                 *
+                 * @param {string} action Whether to add or remove the aria-haspopup attribute.
+                 *
+                 * @return {void}
+                 */
+                toggleAriaHasPopup: function( action ) {
+                        var elements = $adminmenu.find( '[data-ariahaspopup]' );
+
+                        if ( action === 'add' ) {
+                                elements.each( function() {
+                                        $( this ).attr( 'aria-haspopup', 'menu' ).attr( 'aria-expanded', 'false' );
+                                } );
+
+                                return;
+                        }
+
+                        elements.each( function() {
+                                $( this ).removeAttr( 'aria-haspopup' ).removeAttr( 'aria-expanded' );
+                        } );
                 },
 
@@ -2035 +2045 @@
         setPinMenu();
         setMenuState();
-        currentMenuItemHasPopup();
         makeNoticesDismissible();
         aria_button_if_js();

trunk/src/wp-admin/menu-header.php

@@ -99 +99 @@
                         $class[] = 'wp-not-current-submenu';
                         if ( ! empty( $submenu_items ) ) {
-                                $aria_attributes .= 'aria-haspopup="true"';
+                                $aria_attributes .= 'data-ariahaspopup';
                         }
                 }