forked from mirror/_s
Merge pull request #643 from Automattic/aria-toggle
Improve menu toggle accessibility. Fixes #575.
This commit is contained in:
commit
e142af3a27
|
@ -29,7 +29,7 @@
|
|||
</div><!-- .site-branding -->
|
||||
|
||||
<nav id="site-navigation" class="main-navigation" role="navigation">
|
||||
<button class="menu-toggle"><?php _e( 'Primary Menu', '_s' ); ?></button>
|
||||
<button class="menu-toggle" aria-controls="menu" aria-expanded="false"><?php _e( 'Primary Menu', '_s' ); ?></button>
|
||||
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
|
||||
</nav><!-- #site-navigation -->
|
||||
</header><!-- #masthead -->
|
||||
|
|
|
@ -7,12 +7,14 @@
|
|||
var container, button, menu;
|
||||
|
||||
container = document.getElementById( 'site-navigation' );
|
||||
if ( ! container )
|
||||
if ( ! container ) {
|
||||
return;
|
||||
}
|
||||
|
||||
button = container.getElementsByTagName( 'button' )[0];
|
||||
if ( 'undefined' === typeof button )
|
||||
if ( 'undefined' === typeof button ) {
|
||||
return;
|
||||
}
|
||||
|
||||
menu = container.getElementsByTagName( 'ul' )[0];
|
||||
|
||||
|
@ -22,13 +24,21 @@
|
|||
return;
|
||||
}
|
||||
|
||||
if ( -1 === menu.className.indexOf( 'nav-menu' ) )
|
||||
menu.setAttribute( 'aria-expanded', 'false' );
|
||||
|
||||
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
|
||||
menu.className += ' nav-menu';
|
||||
}
|
||||
|
||||
button.onclick = function() {
|
||||
if ( -1 !== container.className.indexOf( 'toggled' ) )
|
||||
if ( -1 !== container.className.indexOf( 'toggled' ) ) {
|
||||
container.className = container.className.replace( ' toggled', '' );
|
||||
else
|
||||
button.setAttribute( 'aria-expanded', 'false' );
|
||||
menu.setAttribute( 'aria-expanded', 'false' );
|
||||
} else {
|
||||
container.className += ' toggled';
|
||||
button.setAttribute( 'aria-expanded', 'true' );
|
||||
menu.setAttribute( 'aria-expanded', 'true' );
|
||||
}
|
||||
};
|
||||
} )();
|
||||
|
|
Reference in New Issue