Changeset 27594

Timestamp:

03/18/2014 10:36:12 PM (11 years ago)

Author:

lancewillett

Message:

Twenty Fourteen: make small-screen menu accessible to keyboard commands and voice-driven software by using a focusable button element rather than h1 for the toggle element. Fixes #27147, props jartes and joedolson.

Location:

trunk/src/wp-content/themes/twentyfourteen

Files:

• header.php (modified) (1 diff)
• style.css (modified) (4 diffs)

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

@@ -50 +50 @@
 
             <nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
-                <h1 class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></h1>
+                <button class="menu-toggle"><?php _e( 'Primary Menu', 'twentyfourteen' ); ?></button>
                 <a class="screen-reader-text skip-link" href="#content"><?php _e( 'Skip to content', 'twentyfourteen' ); ?></a>
                 <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

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

@@ -821 +821 @@
 
 /* Ensure that there is no gap between the header and
-   the admin bar for WordPress versions before 3.8. */
+     the admin bar for WordPress versions before 3.8. */
 #wpadminbar {
     min-height: 32px;
@@ -987 +987 @@
 
 .menu-toggle {
+    background-color: #000;
+    border-radius: 0;
     cursor: pointer;
     font-size: 0;
@@ -992 +994 @@
     margin: 0;
     overflow: hidden;
+    padding: 0;
     position: absolute;
     top: 0;
@@ -1002 +1005 @@
     color: #fff;
     content: "\f419";
+    display: inline;
     margin-top: 16px;
+}
+
+.menu-toggle:active,
+.menu-toggle:focus,
+.menu-toggle:hover {
+    background-color: #444;
+}
+
+.menu-toggle:focus {
+    outline: 1px dotted;
 }