From 5aa3534c2d17426875075226232f8200f22bb5a7 Mon Sep 17 00:00:00 2001 From: Joe Dolson Date: Mon, 3 Mar 2025 20:06:03 +0000 Subject: [PATCH] Bundled Themes: Twenty Twelve: Add ARIA attributes on menu toggle. Add `aria-expanded` and `aria-controls` attributes to the Twenty Twelve mobile menu toggle. Props bschneidewind, joedolson, sabernhardt, umeshsinghin. Fixes #62892. git-svn-id: https://develop.svn.wordpress.org/trunk@59911 602fd350-edb4-49c9-b593-d223f7449a82 --- src/wp-content/themes/twentytwelve/js/navigation.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/wp-content/themes/twentytwelve/js/navigation.js b/src/wp-content/themes/twentytwelve/js/navigation.js index f7141bff7e..93bc0d3f03 100644 --- a/src/wp-content/themes/twentytwelve/js/navigation.js +++ b/src/wp-content/themes/twentytwelve/js/navigation.js @@ -20,15 +20,25 @@ return; } + // Assign an ID for the default page list if no menu is set as Primary. + if ( ! menu.id ) { + menu.id = 'twentytwelve-page-list-menu'; + } + + button.setAttribute( 'aria-controls', menu.id ); + button.setAttribute( 'aria-expanded', 'false' ); + button.onclick = function() { if ( -1 === menu.className.indexOf( 'nav-menu' ) ) { menu.className = 'nav-menu'; } if ( -1 !== button.className.indexOf( 'toggled-on' ) ) { + button.setAttribute( 'aria-expanded', 'false' ); button.className = button.className.replace( ' toggled-on', '' ); menu.className = menu.className.replace( ' toggled-on', '' ); } else { + button.setAttribute( 'aria-expanded', 'true' ); button.className += ' toggled-on'; menu.className += ' toggled-on'; }