wp/wp-content/themes/twentytwelve/js/navigation.js
changeset 5 5e2f62d02dcd
parent 0 d970ebf37754
--- a/wp/wp-content/themes/twentytwelve/js/navigation.js	Mon Jun 08 16:11:51 2015 +0000
+++ b/wp/wp-content/themes/twentytwelve/js/navigation.js	Tue Jun 09 03:35:32 2015 +0200
@@ -1,16 +1,18 @@
 /**
- * navigation.js
- *
- * Handles toggling the navigation menu for small screens.
+ * Handles toggling the navigation menu for small screens and
+ * accessibility for submenu items.
  */
 ( function() {
 	var nav = document.getElementById( 'site-navigation' ), button, menu;
-	if ( ! nav )
+	if ( ! nav ) {
 		return;
-	button = nav.getElementsByTagName( 'h3' )[0];
+	}
+
+	button = nav.getElementsByTagName( 'button' )[0];
 	menu   = nav.getElementsByTagName( 'ul' )[0];
-	if ( ! button )
+	if ( ! button ) {
 		return;
+	}
 
 	// Hide button if menu is missing or empty.
 	if ( ! menu || ! menu.childNodes.length ) {
@@ -19,10 +21,11 @@
 	}
 
 	button.onclick = function() {
-		if ( -1 == menu.className.indexOf( 'nav-menu' ) )
+		if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
 			menu.className = 'nav-menu';
+		}
 
-		if ( -1 != button.className.indexOf( 'toggled-on' ) ) {
+		if ( -1 !== button.className.indexOf( 'toggled-on' ) ) {
 			button.className = button.className.replace( ' toggled-on', '' );
 			menu.className = menu.className.replace( ' toggled-on', '' );
 		} else {
@@ -30,4 +33,23 @@
 			menu.className += ' toggled-on';
 		}
 	};
-} )();
\ No newline at end of file
+} )();
+
+// Better focus for hidden submenu items for accessibility.
+( function( $ ) {
+	$( '.main-navigation' ).find( 'a' ).on( 'focus.twentytwelve blur.twentytwelve', function() {
+		$( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
+	} );
+
+  if ( 'ontouchstart' in window ) {
+    $('body').on( 'touchstart.twentytwelve',  '.menu-item-has-children > a, .page_item_has_children > a', function( e ) {
+      var el = $( this ).parent( 'li' );
+
+      if ( ! el.hasClass( 'focus' ) ) {
+        e.preventDefault();
+        el.toggleClass( 'focus' );
+        el.siblings( '.focus').removeClass( 'focus' );
+      }
+    } );
+  }
+} )( jQuery );