Changeset 58449

Timestamp:

06/20/2024 07:39:50 PM (4 weeks 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();
+
             }).on( 'wp-responsive-deactivate.wp-responsive', function() {
                 self.deactivate();
+
             });
 
@@ -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 ).trigger( 'focus' );
                 event.preventDefault();
@@ -1836 +1818 @@
 
             this.maybeDisableSortables();
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
         },
 
@@ -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 .= '';
             }
         }