TwentyTwentyOne: Add aria-controls attributes to primary sub-menu.

On the Twenty Twenty-One theme, this changeset adds `aria-controls` attribute to sub-menu buttons and an `id` to the sub-menu wrapper for additional context on what is being expanded.

Props bschneidewind, audrasjb, anandraj346.
Fixes #62973.


git-svn-id: https://develop.svn.wordpress.org/trunk@59856 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jb Audras 2025-02-22 00:28:36 +00:00
parent 165d803380
commit 00ae6b88db

View File

@ -120,6 +120,19 @@ function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line
};
}
// Add aria-controls attributes to primary sub-menu.
var subMenus = document.querySelectorAll( '.primary-menu-container .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 );
}
}
} );
/**
* Trap keyboard navigation in the menu modal.
* Adapted from Twenty Twenty.