Changeset 27607

Timestamp:

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

Author:

lancewillett

Message:

Twenty Thirteen: improve menu navigation for keyboard and voice-over interactions by properly focusing on submenu items when they are open. Closes #24839, props dannydehaan, joedolson, lancewillett, Frank Klein.

Location:

trunk/src/wp-content/themes/twentythirteen

Files:

• css/editor-style.css (modified) (1 diff)
• css/ie.css (modified) (1 diff)
• functions.php (modified) (1 diff)
• js/functions.js (modified) (4 diffs)
• style.css (modified) (4 diffs)

trunk/src/wp-content/themes/twentythirteen/css/editor-style.css

@@ -367 +367 @@
 
 .mceTemp + ul,
-.mceTemp + ol  {
+.mceTemp + ol {
     list-style-position: inside;
 }

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

@@ -221 +221 @@
 }
 
-.ie7 .nav-menu li ul ul {
-    left: 100%;
-    top: 0;
+.ie7 .nav-menu .sub-menu,
+.ie7 .nav-menu .children {
+    display: none;
+    overflow: visible;
+}
+
+.ie7 ul.nav-menu li:hover > ul,
+.ie7 .nav-menu ul li:hover > ul {
+    display: block;
 }
 

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

@@ -169 +169 @@
 
     // Loads JavaScript file with functionality specific to Twenty Thirteen.
-    wp_enqueue_script( 'twentythirteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '2013-07-18', true );
+    wp_enqueue_script( 'twentythirteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '2014-03-18', true );
 
     // Add Source Sans Pro and Bitter fonts, used in the main stylesheet.

trunk/src/wp-content/themes/twentythirteen/js/functions.js

@@ -17 +17 @@
         if ( body.is( '.sidebar' ) ) {
             var sidebar   = $( '#secondary .widget-area' ),
-                secondary = ( 0 == sidebar.length ) ? -40 : sidebar.height(),
+                secondary = ( 0 === sidebar.length ) ? -40 : sidebar.height(),
                 margin    = $( '#tertiary .widget-area' ).height() - $( '#content' ).height() - secondary;
 
-            if ( margin > 0 && _window.innerWidth() > 999 )
+            if ( margin > 0 && _window.innerWidth() > 999 ) {
                 $( '#colophon' ).css( 'margin-top', margin + 'px' );
+            }
         }
     } );
@@ -30 +31 @@
     ( function() {
         var nav = $( '#site-navigation' ), button, menu;
-        if ( ! nav )
+        if ( ! nav ) {
             return;
+        }
 
         button = nav.find( '.menu-toggle' );
-        if ( ! button )
+        if ( ! button ) {
             return;
+        }
 
         // Hide button if menu is missing or empty.
@@ -44 +47 @@
         }
 
-        $( '.menu-toggle' ).on( 'click.twentythirteen', function() {
+        button.on( 'click.twentythirteen', function() {
             nav.toggleClass( 'toggled-on' );
+        } );
+
+        // Better focus for hidden submenu items for accessibility.
+        menu.find( 'a' ).on( 'focus.twentythirteen blur.twentythirteen', function() {
+            $( this ).parents( '.menu-item, .page_item' ).toggleClass( 'focus' );
         } );
     } )();
@@ -59 +67 @@
 
         if ( element ) {
-            if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) )
+            if ( ! /^(?:a|select|input|button|textarea)$/i.test( element.tagName ) ) {
                 element.tabIndex = -1;
+            }
 
             element.focus();

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

@@ -754 +754 @@
 
 .wp-caption.alignleft + ul,
-.wp-caption.alignleft + ol  {
+.wp-caption.alignleft + ol {
     list-style-position: inside;
 }
@@ -868 +868 @@
 
 .nav-menu li:hover > a,
-.nav-menu li a:hover {
+.nav-menu li a:hover,
+.nav-menu li:focus > a,
+.nav-menu li a:focus {
     background-color: #220e10;
     color: #fff;
@@ -878 +880 @@
     border: 2px solid #f7f5e7;
     border-top: 0;
-    display: none;
     padding: 0;
     position: absolute;
     left: -2px;
     z-index: 99999;
+    height: 1px;
+    width: 1px;
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
 }
 
@@ -900 +905 @@
 
 ul.nav-menu ul a:hover,
-.nav-menu ul ul a:hover {
+.nav-menu ul ul a:hover,
+ul.nav-menu ul a:focus,
+.nav-menu ul ul a:focus {
     background-color: #db572f;
 }
 
 ul.nav-menu li:hover > ul,
-.nav-menu ul li:hover > ul {
-    display: block;
+.nav-menu ul li:hover > ul,
+ul.nav-menu .focus > ul,
+.nav-menu .focus > ul {
+    clip: inherit;
+    overflow: inherit;
+    height: inherit;
+    width: inherit;
 }