_s: Tabbable dropdown menus.

Fixes #540.

js/navigation.js

@@ -1,10 +1,11 @@
 /**
  * navigation.js
  *
- * Handles toggling the navigation menu for small screens.
+ * Handles toggling the navigation menu for small screens and enables tab
+ * support for dropdown menus.
  */
 ( function() {
-	var container, button, menu;
+	var container, button, menu, links, subMenus;
 
 	container = document.getElementById( 'site-navigation' );
 	if ( ! container ) {
@@ -25,7 +26,6 @@
 	}
 
 	menu.setAttribute( 'aria-expanded', 'false' );
-
 	if ( -1 === menu.className.indexOf( 'nav-menu' ) ) {
 		menu.className += ' nav-menu';
 	}
@@ -41,4 +41,41 @@
 			menu.setAttribute( 'aria-expanded', 'true' );
 		}
 	};
+
+	// Get all the link elements within the menu.
+	links    = menu.getElementsByTagName( 'a' );
+	subMenus = menu.getElementsByTagName( 'ul' );
+
+	// Set menu items with submenus to aria-haspopup="true".
+	for ( var i = 0, len = subMenus.length; i < len; i++ ) {
+		subMenus[i].parentNode.setAttribute( 'aria-haspopup', 'true' );
+	}
+
+	// Each time a menu link is focused or blurred, toggle focus.
+	for ( i = 0, len = links.length; i < len; i++ ) {
+		links[i].addEventListener( 'focus', toggleFocus, true );
+		links[i].addEventListener( 'blur', toggleFocus, true );
+	}
+
+	/**
+	 * Sets or removes .focus class on an element.
+	 */
+	function toggleFocus() {
+		var self = this;
+
+		// Move up through the ancestors of the current link until we hit .nav-menu.
+		while ( -1 === self.className.indexOf( 'nav-menu' ) ) {
+
+			// On li elements toggle the class .focus.
+			if ( 'li' === self.tagName.toLowerCase() ) {
+				if ( -1 !== self.className.indexOf( 'focus' ) ) {
+					self.className = self.className.replace( ' focus', '' );
+				} else {
+					self.className += ' focus';
+				}
+			}
+
+			self = self.parentElement;
+		}
+	}
 } )();

sass/navigation/_menus.scss

@@ -23,7 +23,8 @@
 			}
 
 			li {
-				&:hover > ul {
+				&:hover > ul,
+				&.focus > ul {
 					left: 100%;
 				}
 			}
@@ -32,14 +33,17 @@
 				width: 200px;
 			}
 
-			:hover > a {
+			:hover > a,
+			.focus > a {
 			}
 
-			a:hover {
+			a:hover,
+			a.focus {
 			}
 		}
 
-		li:hover > ul {
+		li:hover > ul,
+		li.focus > ul {
 			left: auto;
 		}
 	}
@@ -47,7 +51,8 @@
 		float: left;
 		position: relative;
 
-		&:hover > a {
+		&:hover > a,
+		&.focus > a {
 		}
 	}
 	a {

style.css

@@ -564,20 +564,25 @@ a:active {
 
 }
 
-.main-navigation li:hover > a {
+.main-navigation li:hover > a,
+.main-navigation li.focus > a {
 }
 
-.main-navigation ul ul :hover > a {
+.main-navigation ul ul :hover > a,
+.main-navigation ul ul .focus > a {
 }
 
-.main-navigation ul ul a:hover {
+.main-navigation ul ul a:hover,
+.main-navigation ul ul a.focus {
 }
 
-.main-navigation ul li:hover > ul {
+.main-navigation ul li:hover > ul,
+.main-navigation ul li.focus > ul {
 	left: auto;
 }
 
-.main-navigation ul ul li:hover > ul {
+.main-navigation ul ul li:hover > ul,
+.main-navigation ul ul li.focus > ul {
 	left: 100%;
 }