Changeset 59916

Timestamp:

03/03/2025 09:05:20 PM (3 months ago)

Author:

joedolson

Message:

Bundled Themes: Twenty Fifteen: Fix ARIA expanded in primary menu.

Set aria-expanded to true when automatically expanding active child menus in the primary menu. Add aria-controls to explicitly define controlled content in menus.

Props bschneidewind, joedolson, dhruvang21, pooja1210, shailu25.
Fixes #62936.

File:

• trunk/src/wp-content/themes/twentyfifteen/js/functions.js (modified) (2 diffs)

trunk/src/wp-content/themes/twentyfifteen/js/functions.js

@@ -15 +15 @@
 
         // Toggle buttons and submenu items with active children menu items.
-        container.find( '.current-menu-ancestor > button' ).addClass( 'toggle-on' );
+        container.find( '.current-menu-ancestor > button' ).addClass( 'toggle-on' ).attr( 'aria-expanded', 'true' );
         container.find( '.current-menu-ancestor > .sub-menu' ).addClass( 'toggled-on' );
 
@@ -23 +23 @@
             _this.toggleClass( 'toggle-on' );
             _this.next( '.children, .sub-menu' ).toggleClass( 'toggled-on' );
-            _this.attr( 'aria-expanded', _this.attr( 'aria-expanded' ) === 'false' ? 'true' : 'false' );
+            _this.attr( 'aria-expanded', _this.hasClass( 'toggle-on' ) ? 'true' : 'false' );
             _this.html( _this.html() === screenReaderText.expand ? screenReaderText.collapse : screenReaderText.expand );
         } );
     }
     initMainNavigation( $( '.main-navigation' ) );
+
+    // Add unique ID to each .sub-menu and aria-controls to parent links
+    function addUniqueIDToSubMenus() {
+        var subMenus = document.querySelectorAll( '.main-navigation .sub-menu' );
+        subMenus.forEach( function( subMenu, index ) {
+            var parentLi = subMenu.closest( 'li.menu-item-has-children' );
+            subMenu.id = 'sub-menu-' + (index + 1);
+            if ( parentLi ) {
+                var parentLink = parentLi.querySelector( 'button' );
+                if ( parentLink ) {
+                    parentLink.setAttribute( 'aria-controls', subMenu.id );
+                }
+            }
+        } );
+    }
+
+    addUniqueIDToSubMenus();
 
     // Re-initialize the main navigation when it is updated, persisting any existing submenu expanded states.