From 00ae6b88db84c0c236203ad17ce9b5d180f31079 Mon Sep 17 00:00:00 2001 From: Jb Audras Date: Sat, 22 Feb 2025 00:28:36 +0000 Subject: [PATCH] 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 --- .../twentytwentyone/assets/js/primary-navigation.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js b/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js index c53af8268c..8b3739865f 100644 --- a/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js +++ b/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js @@ -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.