rayelliott
/
_s
Archived
forked from mirror/_s
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #643 from Automattic/aria-toggle 

Improve menu toggle accessibility.

Fixes #575.
This commit is contained in:
Konstantin Obenland 2014-11-12 14:35:29 -05:00
parent 23d0a41722 d8d89bc681
commit e142af3a27
2 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
header.php
View File

@ -29,7 +29,7 @@
</div><!-- .site-branding --> </div><!-- .site-branding -->
<nav id="site-navigation" class="main-navigation" role="navigation"> <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' ) ); ?> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #site-navigation --> </nav><!-- #site-navigation -->
</header><!-- #masthead --> </header><!-- #masthead -->

20
js/navigation.js
View File

@ -7,12 +7,14 @@
var container, button, menu; var container, button, menu;
container = document.getElementById( 'site-navigation' ); container = document.getElementById( 'site-navigation' );
if ( ! container ) if ( ! container ) {
return; return;
}
button = container.getElementsByTagName( 'button' )[0]; button = container.getElementsByTagName( 'button' )[0];
if ( 'undefined' === typeof button ) if ( 'undefined' === typeof button ) {
return; return;
}
menu = container.getElementsByTagName( 'ul' )[0]; menu = container.getElementsByTagName( 'ul' )[0];
@ -22,13 +24,21 @@
return; return;
} }
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) menu.setAttribute( 'aria-expanded', 'false' );
if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
menu.className += ' nav-menu'; menu.className += ' nav-menu';
}
button.onclick = function() { button.onclick = function() {
if ( -1 !== container.className.indexOf( 'toggled' ) ) if ( -1 !== container.className.indexOf( 'toggled' ) ) {
container.className = container.className.replace( ' toggled', '' ); container.className = container.className.replace( ' toggled', '' );
else button.setAttribute( 'aria-expanded', 'false' );
menu.setAttribute( 'aria-expanded', 'false' );
} else {
container.className += ' toggled'; container.className += ' toggled';
button.setAttribute( 'aria-expanded', 'true' );
menu.setAttribute( 'aria-expanded', 'true' );
}
}; };
} )(); } )();