diff --git a/src/wp-content/themes/twentyfifteen/js/functions.js b/src/wp-content/themes/twentyfifteen/js/functions.js index ba102a0cb4..f4b80c7e73 100644 --- a/src/wp-content/themes/twentyfifteen/js/functions.js +++ b/src/wp-content/themes/twentyfifteen/js/functions.js @@ -14,7 +14,7 @@ container.find( '.menu-item-has-children > a' ).after( '' ); // 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' ); container.find( '.dropdown-toggle' ).on( 'click', function( e ) { @@ -22,12 +22,29 @@ e.preventDefault(); _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. $( document ).on( 'customize-preview-menu-refreshed', function( e, params ) { if ( 'primary' === params.wpNavMenuArgs.theme_location ) {