From aa163fdee376f926b8a518a48e01cee2bde4f6bf Mon Sep 17 00:00:00 2001
From: Lance Willett <lancewillett@git.wordpress.org>
Date: Tue, 15 Jul 2014 23:09:41 +0000
Subject: [PATCH] Twenty Thirteen: 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 #28293, props
 rclations and obenland.

git-svn-id: https://develop.svn.wordpress.org/trunk@29181 602fd350-edb4-49c9-b593-d223f7449a82
---
 .../themes/twentythirteen/header.php          |  2 +-
 .../themes/twentythirteen/style.css           | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/wp-content/themes/twentythirteen/header.php b/src/wp-content/themes/twentythirteen/header.php
index 82aed1fdaf..f61c28f0f8 100644
--- a/src/wp-content/themes/twentythirteen/header.php
+++ b/src/wp-content/themes/twentythirteen/header.php
@@ -40,7 +40,7 @@
 
 			<div id="navbar" class="navbar">
 				<nav id="site-navigation" class="navigation main-navigation" role="navigation">
-					<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
+					<button class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></button>
 					<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
 					<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
 					<?php get_search_form(); ?>
diff --git a/src/wp-content/themes/twentythirteen/style.css b/src/wp-content/themes/twentythirteen/style.css
index e8fe3635ec..93456fa528 100644
--- a/src/wp-content/themes/twentythirteen/style.css
+++ b/src/wp-content/themes/twentythirteen/style.css
@@ -2853,9 +2853,22 @@ footer.entry-meta {
 		display: inline-block;
 		font: bold 16px/1.3 "Source Sans Pro", Helvetica, sans-serif;
 		margin: 0;
+	}
+
+	.menu-toggle,
+	.menu-toggle:hover,
+	.menu-toggle:focus,
+	.menu-toggle:active {
+		background: none;
+		border: none;
+		color: #141412;
 		padding: 12px 0 12px 20px;
 	}
 
+	.menu-toggle:focus {
+		outline: thin dotted;
+	}
+
 	.menu-toggle:after {
 		content: "\f502";
 		font-size: 12px;
@@ -2908,6 +2921,12 @@ footer.entry-meta {
 		color: #fff;
 	}
 
+	.toggled-on .nav-menu > li a:focus,
+	.toggled-on .nav-menu > ul a:focus {
+		background-color: #220e10;
+		color: #fff;
+	}
+
 	ul.nav-menu,
 	div.nav-menu > ul {
 		display: none;