wp/wp-content/themes/twentythirteen/js/functions.js
changeset 5 5e2f62d02dcd
parent 0 d970ebf37754
child 7 cf61fcea0001
--- 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();
 		}