mirror_php/wordpress
1
0
Fork 0
mirror of git://develop.git.wordpress.org/ synced 2025-03-21 12:29:53 +01:00
Code Issues Actions 12 Packages Projects Releases Wiki Activity

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

Browse Source 
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.

git-svn-id: https://develop.svn.wordpress.org/trunk@59916 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Joe Dolson 2025-03-03 21:05:20 +00:00
parent 04b6524cb0
commit ad039b2f25
1 changed files with 19 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/wp-content/themes/twentyfifteen/js/functions.js
View File

@ -14,7 +14,7 @@
container.find( '.menu-item-has-children > a' ).after( '<button class="dropdown-toggle" aria-expanded="false">' + screenReaderText.expand + '</button>' );
// 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 ) {