From d6950e7b010ed00376b9e9caecd820ef9c298040 Mon Sep 17 00:00:00 2001
From: Lance Willett <nanobar@gmail.com>
Date: Thu, 11 Oct 2012 17:17:55 +0000
Subject: [PATCH] Twenty Twelve: improve skip link visibility, mimicing the
 core toolbar skiplink. Closes #22025, see #22087.

git-svn-id: http://core.svn.wordpress.org/trunk@22186 1a063a9b-81f0-0310-95a4-ce76da25c4cd
---
 header.php |  2 +-
 style.css  | 21 +++++++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/header.php b/header.php
index 5195c9064..24b6d12c8 100644
--- a/header.php
+++ b/header.php
@@ -38,7 +38,7 @@
 
 		<nav id="site-navigation" class="main-navigation" role="navigation">
 			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>
-			<div class="skip-link assistive-text"><a href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a></div>
+			<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' ) ); ?>
 		</nav><!-- #site-navigation -->
 
diff --git a/style.css b/style.css
index deb48373a..68f9fe20b 100644
--- a/style.css
+++ b/style.css
@@ -460,12 +460,27 @@ a:hover {
 }
 
 /* Assistive text */
-.skip-link,
-.screen-reader-text,
 .assistive-text {
 	position: absolute !important;
 	clip: rect(1px, 1px, 1px, 1px);
 }
+.main-navigation .assistive-text:hover,
+.main-navigation .assistive-text:active,
+.main-navigation .assistive-text:focus {
+	background: #fff;
+	border: 2px solid #333;
+	border-radius: 3px;
+	clip: auto !important;
+	color: #000;
+	display: block;
+	font-size: 12px;
+	padding: 12px;
+	position: absolute;
+	top: 5px;
+	left: 5px;
+	z-index: 100000; /* Above WP toolbar */
+}
+
 
 /* Page structure */
 .site {
@@ -1650,8 +1665,6 @@ img#wpstats {
 /* =IE 7 and 8
 ----------------------------------------------- */
 
-.ie .skip-link,
-.ie .screen-reader-text,
 .ie .assistive-text {
 	clip: rect(1px 1px 1px 1px); /* IE7 */
 }