Changeset 29095

Timestamp:

07/11/2014 05:46:11 PM (11 years ago)

Author:

lancewillett

Message:

Twenty Twelve: make small-screen menu accessible to keyboard commands and voice-driven software by using a focusable button element rather than h3 for the toggle element. Fixes #28224, props rclations.

Location:

trunk/src/wp-content/themes/twentytwelve

Files:

• functions.php (modified) (1 diff)
• header.php (modified) (1 diff)
• js/navigation.js (modified) (1 diff)
• style.css (modified) (1 diff)

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( 'jquery' ), '20140608', true );
+    wp_enqueue_script( 'twentytwelve-navigation', get_template_directory_uri() . '/js/navigation.js', array( 'jquery' ), '20140711', true );
 
     $font_url = twentytwelve_get_font_url();

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

@@ -41 +41 @@
 
         <nav id="site-navigation" class="main-navigation" role="navigation">
-            <h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
+            <button class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></button>
             <a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>
             <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

trunk/src/wp-content/themes/twentytwelve/js/navigation.js

@@ -9 +9 @@
     }
 
-    button = nav.getElementsByTagName( 'h3' )[0];
+    button = nav.getElementsByTagName( 'button' )[0];
     menu   = nav.getElementsByTagName( 'ul' )[0];
     if ( ! button ) {

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

@@ -273 +273 @@
 }
 .menu-toggle:hover,
+.menu-toggle:focus,
 button:hover,
 input[type="submit"]:hover,