Ticket #24839: 24839.twenty-twelve.4.diff

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

@@ -110 +110 @@
         position: absolute;
         top: 100%;
         z-index: 1;
+        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
 }
 .ie7 .main-navigation li ul {
         left: 0;

wp-content/themes/twentytwelve/functions.php

@@ -140 +140 @@
                 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 +1 @@
 /**
- * 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 +21 @@
         }
 
         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 +33 @@
                         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 );

wp-content/themes/twentytwelve/style.css

@@ -590 +590 @@
 .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 +1510 @@
                 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 +1520 @@
                 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 +1556 @@
                 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;
         }