diff -r 346c88efed21 -r 5e2f62d02dcd wp/wp-content/themes/twentythirteen/js/functions.js --- a/wp/wp-content/themes/twentythirteen/js/functions.js Mon Jun 08 16:11:51 2015 +0000 +++ b/wp/wp-content/themes/twentythirteen/js/functions.js Tue Jun 09 03:35:32 2015 +0200 @@ -6,7 +6,12 @@ ( function( $ ) { var body = $( 'body' ), - _window = $( window ); + _window = $( window ), + nav, button, menu; + + nav = $( '#site-navigation' ); + button = nav.find( '.menu-toggle' ); + menu = nav.find( '.nav-menu' ); /** * Adds a top margin to the footer if the sidebar widget area is higher @@ -16,11 +21,12 @@ $( function() { if ( body.is( '.sidebar' ) ) { var sidebar = $( '#secondary .widget-area' ), - secondary = ( 0 == sidebar.length ) ? -40 : sidebar.height(), + secondary = ( 0 === sidebar.length ) ? -40 : sidebar.height(), margin = $( '#tertiary .widget-area' ).height() - $( '#content' ).height() - secondary; - if ( margin > 0 && _window.innerWidth() > 999 ) + if ( margin > 0 && _window.innerWidth() > 999 ) { $( '#colophon' ).css( 'margin-top', margin + 'px' ); + } } } ); @@ -28,27 +34,71 @@ * Enables menu toggle for small screens. */ ( function() { - var nav = $( '#site-navigation' ), button, menu; - if ( ! nav ) + if ( ! nav || ! button ) { return; - - button = nav.find( '.menu-toggle' ); - if ( ! button ) - return; + } // Hide button if menu is missing or empty. - menu = nav.find( '.nav-menu' ); if ( ! menu || ! menu.children().length ) { button.hide(); return; } - $( '.menu-toggle' ).on( 'click.twentythirteen', function() { + button.on( 'click.twentythirteen', function() { nav.toggleClass( 'toggled-on' ); + if ( nav.hasClass( 'toggled-on' ) ) { + $( this ).attr( 'aria-expanded', 'true' ); + menu.attr( 'aria-expanded', 'true' ); + } else { + $( this ).attr( 'aria-expanded', 'false' ); + menu.attr( 'aria-expanded', 'false' ); + } + } ); + + // Fix sub-menus for touch devices. + if ( 'ontouchstart' in window ) { + menu.find( '.menu-item-has-children > a, .page_item_has_children > a' ).on( 'touchstart.twentythirteen', function( e ) { + var el = $( this ).parent( 'li' ); + + if ( ! el.hasClass( 'focus' ) ) { + e.preventDefault(); + el.toggleClass( 'focus' ); + el.siblings( '.focus' ).removeClass( 'focus' ); + } + } ); + } + + // Better focus for hidden submenu items for accessibility. + menu.find( 'a' ).on( 'focus.twentythirteen blur.twentythirteen', function() { + $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' ); } ); } )(); /** + * @summary Add or remove ARIA attributes. + * Uses jQuery's width() function to determine the size of the window and add + * the default ARIA attributes for the menu toggle if it's visible. + * @since Twenty Thirteen 1.5 + */ + function onResizeARIA() { + if ( 643 > _window.width() ) { + button.attr( 'aria-expanded', 'false' ); + menu.attr( 'aria-expanded', 'false' ); + button.attr( 'aria-controls', 'primary-menu' ); + } else { + button.removeAttr( 'aria-expanded' ); + menu.removeAttr( 'aria-expanded' ); + button.removeAttr( 'aria-controls' ); + } + } + + _window + .on( 'load.twentythirteen', onResizeARIA ) + .on( 'resize.twentythirteen', function() { + onResizeARIA(); + } ); + + /** * Makes "skip to content" link work correctly in IE9 and Chrome for better * accessibility. * @@ -58,8 +108,9 @@ var element = document.getElementById( location.hash.substring( 1 ) ); if ( element ) { - if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) + if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) { element.tabIndex = -1; + } element.focus(); }