Changeset 58449

Timestamp:

06/20/2024 07:39:50 PM (6 months 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';
             }
         }