Skip to content

Commit

Permalink
_s: Improve menu toggle accessibility.
Browse files Browse the repository at this point in the history 
Makes it a little easier to use the primary navigation with assistive
devices.

See #545.
  • Loading branch information
@obenland
obenland committed Nov 6, 2014
1 parent 23d0a41 commit d8d89bc
Show file tree
Hide file tree
Showing 2 changed files with 16 additions and 6 deletions.
2 changes: 1 addition & 1 deletion header.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
20 changes: 15 additions & 5 deletions js/navigation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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];

Expand All @@ -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' );
}
};
} )();

2 comments on commit d8d89bc

@mtomas7
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would this also fit _s? It's from Twenty Twelve.

// Better focus for hidden submenu items for accessibility.

( function( $ ) {
$( '.main-navigation' ).find( 'a' ).on( 'focus._s blur._s', function() {
$( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
} );

if ( 'ontouchstart' in window ) {
    $( '.menu-item-has-children > a' ).on( 'touchstart._s', function( e ) {
      var el = $( this ).parent( 'li' );

      if ( ! el.hasClass( 'focus' ) ) {
        e.preventDefault();
        el.toggleClass( 'focus' );
        el.siblings( '.focus').removeClass( 'focus' );
      }
    } );
}

} )( jQuery );

@chrisdc
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @mtomas7 #540 aims to recreate the same functionality in vanilla JavaScript. I'll be updating that pull request later this weekend in light on these latest changes.

Please sign in to comment.