Twenty Twelve: improve menu navigation for keyboard and voice-over interactions by properly focusing on submenu items when they are open. See #24839, props dannydehaan, joedolson, lancewillett.

Built from https://develop.svn.wordpress.org/trunk@27606


git-svn-id: http://core.svn.wordpress.org/trunk@27449 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-content/themes/twentytwelve/css/ie.css

@@ -104,23 +104,38 @@ body.full-width .site-content {
 	position: relative;
 }
 .main-navigation li ul {
-	display: none;
 	margin: 0;
 	padding: 0;
 	position: absolute;
 	top: 100%;
 	z-index: 1;
+	height: 1px;
+	width: 1px;
+	overflow: hidden;
+	clip: rect(1px, 1px, 1px, 1px);
 }
 .ie7 .main-navigation li ul {
+	clip: inherit;
+	display: none;
 	left: 0;
+	overflow: visible;
 }
 .main-navigation li ul ul,
 .ie7 .main-navigation li ul ul {
 	top: 0;
 	left: 100%;
 }
-.main-navigation ul li:hover > ul {
+.main-navigation ul li:hover > ul,
+.main-navigation ul li:focus > ul,
+.main-navigation .focus > ul {
 	border-left: 0;
+	clip: inherit;
+	overflow: inherit;
+	height: inherit;
+	width: inherit;
+}
+.ie7 .main-navigation ul li:hover > ul,
+.ie7 .main-navigation ul li:focus > ul {
 	display: block;
 }
 .main-navigation li ul li a {

wp-content/themes/twentytwelve/functions.php

@@ -140,7 +140,7 @@ function twentytwelve_scripts_styles() {
 		wp_enqueue_script( 'comment-reply' );
 
 	// Adds JavaScript for handling the navigation menu hide-and-show behavior.
-	wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
+	wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20140318', true );
 
 	$font_url = twentytwelve_get_font_url();
 	if ( ! empty( $font_url ) )

wp-content/themes/twentytwelve/js/navigation.js

@@ -1,16 +1,18 @@
 /**
- * navigation.js
+ * Handles toggling the navigation menu for small screens and
- *
+ * accessibility for submenu items.
- * Handles toggling the navigation menu for small screens.
  */
 ( function() {
 	var nav = document.getElementById( 'site-navigation' ), button, menu;
-	if ( ! nav )
+	if ( ! nav ) {
 		return;
+	}
+
 	button = nav.getElementsByTagName( 'h3' )[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,11 @@
 			menu.className += ' toggled-on';
 		}
 	};
-} )();
+} )();
+
+// 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' );
+	} );
+} )( jQuery );

wp-content/themes/twentytwelve/style.css

@@ -590,7 +590,8 @@ a:hover {
 .main-navigation a {
 	color: #5e5e5e;
 }
-.main-navigation a:hover {
+.main-navigation a:hover,
+.main-navigation a:focus {
 	color: #21759b;
 }
 .main-navigation ul.nav-menu,
@@ -1509,7 +1510,8 @@ img#wpstats {
 		text-transform: uppercase;
 		white-space: nowrap;
 	}
-	.main-navigation li a:hover {
+	.main-navigation li a:hover,
+	.main-navigation li a:focus {
 		color: #000;
 	}
 	.main-navigation li {
@@ -1518,20 +1520,28 @@ img#wpstats {
 		position: relative;
 	}
 	.main-navigation li ul {
-		display: none;
 		margin: 0;
 		padding: 0;
 		position: absolute;
 		top: 100%;
 		z-index: 1;
+		height: 1px;
+		width: 1px;
+		overflow: hidden;
+		clip: rect(1px, 1px, 1px, 1px);
 	}
 	.main-navigation li ul ul {
 		top: 0;
 		left: 100%;
 	}
-	.main-navigation ul li:hover > ul {
+	.main-navigation ul li:hover > ul,
+	.main-navigation ul li:focus > ul,
+	.main-navigation .focus > ul {
 		border-left: 0;
-		display: block;
+		clip: inherit;
+		overflow: inherit;
+		height: inherit;
+		width: inherit;
 	}
 	.main-navigation li ul li a {
 		background: #efefef;
@@ -1546,7 +1556,8 @@ img#wpstats {
 		width: 12.85714286rem;
 		white-space: normal;
 	}
-	.main-navigation li ul li a:hover {
+	.main-navigation li ul li a:hover,
+	.main-navigation li ul li a:focus {
 		background: #e3e3e3;
 		color: #444;
 	}