From 8b8455a26c35bd01a43087f92a13b99ea2a4ea09 Mon Sep 17 00:00:00 2001
From: Lance Willett <nanobar@gmail.com>
Date: Wed, 19 Mar 2014 05:29:16 +0000
Subject: [PATCH] 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
---
 css/ie.css       | 19 +++++++++++++++++--
 functions.php    |  2 +-
 js/navigation.js | 26 ++++++++++++++++++--------
 style.css        | 23 +++++++++++++++++------
 4 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/css/ie.css b/css/ie.css
index ddb1e41c1..4d4f5424d 100644
--- a/css/ie.css
+++ b/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 {
diff --git a/functions.php b/functions.php
index a688b5e81..c4055ba05 100644
--- a/functions.php
+++ b/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 ) )
diff --git a/js/navigation.js b/js/navigation.js
index 915e25a91..2c3214108 100644
--- a/js/navigation.js
+++ b/js/navigation.js
@@ -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];
 	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';
 		}
 	};
-} )();
\ 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' );
+	} );
+} )( jQuery );
diff --git a/style.css b/style.css
index 2ab54a75c..7fb30fff0 100644
--- a/style.css
+++ b/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;
 	}