Ticket #25054: 25054.menu-focus.diff

wp-content/themes/twentyfourteen/js/theme.js

@@ -48 +48 @@
                         $( 'span#nav-toggle' ).off( 'click', menuToggle ).click( menuToggle );
                 };
 
-                // DOM manupilations for desktop header
+                // DOM manipulations for desktop header
                 function normalHeader() {
                         // Check if the toggler exists. If it does remove it.
                         if ( $( 'span#nav-toggle').length )
@@ -117 +117 @@
 
         } );
 
+        $('.primary-navigation li').hover(
+                function(){$(this).addClass("a11y-focus");},
+                function(){$(this).delay('250').removeClass("a11y-focus");}
+        );
+        $('.primary-navigation li a').on('focus blur',
+                function(){$(this).parents().toggleClass("a11y-focus");}
+        );
+        
 } )( jQuery );
+ No newline at end of file

wp-content/themes/twentyfourteen/style.css

@@ -684 +684 @@
 }
 .primary-navigation ul ul {
         background-color: rgba(0, 0, 0, 0.9);
-        display: none;
         float: left;
         position: absolute;
                 top: 48px;
-                left: 0;
+                left: -999em;
         z-index: 99999;
 }
 .primary-navigation li li {
@@ -697 +696 @@
         line-height: 1.6363636363;
 }
 .primary-navigation ul ul ul {
-        left: 100%;
+        left: -999em;
         top: 0;
 }
 .primary-navigation ul ul a {
@@ -711 +710 @@
         background-color: #2b2b2b;
         color: #fff;
 }
-.primary-navigation ul li:hover > ul {
-        display: block;
+.primary-navigation ul li:hover > ul, .primary-navigation ul li.a11y-focus > ul {
+        left: auto;     
 }
+.primary-navigation ul ul li:hover > ul, .primary-navigation ul ul li.a11y-focus > ul {
+        left: 100%;
+}
 .primary-navigation li.current_page_item > a,
 .primary-navigation li.current-menu-item > a {
         color: #5FF23D;