Changeset 27606

Timestamp:

03/19/2014 05:28:24 AM (11 years ago)

Author:

lancewillett

Message:

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.

Location:

trunk/src/wp-content/themes/twentytwelve

Files:

• css/ie.css (modified) (3 diffs)
• functions.php (modified) (1 diff)
• js/navigation.js (modified) (3 diffs)
• style.css (modified) (6 diffs)

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

@@ -105 +105 @@
 }
 .main-navigation li ul {
-    display: none;
     margin: 0;
     padding: 0;
@@ -111 +110 @@
     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,
@@ -120 +126 @@
     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;
 }

trunk/src/wp-content/themes/twentytwelve/functions.php

@@ -141 +141 @@
 
     // 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();

trunk/src/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.
@@ -20 +22 @@
 
     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', '' );
@@ -32 +35 @@
     };
 } )();
+
+// 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 );

trunk/src/wp-content/themes/twentytwelve/style.css

@@ -591 +591 @@
     color: #5e5e5e;
 }
-.main-navigation a:hover {
+.main-navigation a:hover,
+.main-navigation a:focus {
     color: #21759b;
 }
@@ -1510 +1511 @@
         white-space: nowrap;
     }
-    .main-navigation li a:hover {
+    .main-navigation li a:hover,
+    .main-navigation li a:focus {
         color: #000;
     }
@@ -1519 +1521 @@
     }
     .main-navigation li ul {
-        display: none;
         margin: 0;
         padding: 0;
@@ -1525 +1526 @@
         top: 100%;
         z-index: 1;
+        height: 1px;
+        width: 1px;
+        overflow: hidden;
+        clip: rect(1px, 1px, 1px, 1px);
     }
     .main-navigation li ul ul {
@@ -1530 +1535 @@
         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 {
@@ -1547 +1557 @@
         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;