From 1ba2f627521385f91110f89b6d457d57c96a6d12 Mon Sep 17 00:00:00 2001
From: obenland <obenland@gmx.de>
Date: Wed, 13 Mar 2013 15:39:05 -0700
Subject: [PATCH] _s: Use .screen-reader-text rather than .assistive-text.

With 3.6 introducing many HTML5 improvements the need for custom
searchform and comment templates will vanish. To cope with core's
.screen-reader-text class, let's make the switch early.

Commit also adds core's focus styles for screen reader texts, so they
can actually be used.
---
 comments.php          |  4 ++--
 header.php            |  2 +-
 inc/template-tags.php |  2 +-
 searchform.php        |  2 +-
 style.css             | 24 ++++++++++++++++++++++--
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/comments.php b/comments.php
index aec4d54..384fe0f 100644
--- a/comments.php
+++ b/comments.php
@@ -36,7 +36,7 @@
 
 		<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
 		<nav id="comment-nav-above" class="navigation-comment" role="navigation">
-			<h1 class="assistive-text"><?php _e( 'Comment navigation', '_s' ); ?></h1>
+			<h1 class="screen-reader-text"><?php _e( 'Comment navigation', '_s' ); ?></h1>
 			<div class="previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
 			<div class="next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
 		</nav><!-- #comment-nav-before -->
@@ -56,7 +56,7 @@
 
 		<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
 		<nav id="comment-nav-below" class="navigation-comment" role="navigation">
-			<h1 class="assistive-text"><?php _e( 'Comment navigation', '_s' ); ?></h1>
+			<h1 class="screen-reader-text"><?php _e( 'Comment navigation', '_s' ); ?></h1>
 			<div class="previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>
 			<div class="next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>
 		</nav><!-- #comment-nav-below -->
diff --git a/header.php b/header.php
index 3401f75..0d4fe83 100644
--- a/header.php
+++ b/header.php
@@ -33,7 +33,7 @@
 
 		<nav id="site-navigation" class="navigation-main" role="navigation">
 			<h1 class="menu-toggle"><?php _e( 'Menu', '_s' ); ?></h1>
-			<div class="assistive-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', '_s' ); ?>"><?php _e( 'Skip to content', '_s' ); ?></a></div>
+			<div class="screen-reader-text skip-link"><a href="#content" title="<?php esc_attr_e( 'Skip to content', '_s' ); ?>"><?php _e( 'Skip to content', '_s' ); ?></a></div>
 
 			<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
 		</nav><!-- #site-navigation -->
diff --git a/inc/template-tags.php b/inc/template-tags.php
index fe3960b..c1b9137 100644
--- a/inc/template-tags.php
+++ b/inc/template-tags.php
@@ -34,7 +34,7 @@ function _s_content_nav( $nav_id ) {
 
 	?>
 	<nav role="navigation" id="<?php echo esc_attr( $nav_id ); ?>" class="<?php echo $nav_class; ?>">
-		<h1 class="assistive-text"><?php _e( 'Post navigation', '_s' ); ?></h1>
+		<h1 class="screen-reader-text"><?php _e( 'Post navigation', '_s' ); ?></h1>
 
 	<?php if ( is_single() ) : // navigation links for single posts ?>
 
diff --git a/searchform.php b/searchform.php
index 7c6b686..33383c7 100644
--- a/searchform.php
+++ b/searchform.php
@@ -7,7 +7,7 @@
  */
 ?>
 	<form method="get" id="searchform" class="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>" role="search">
-		<label for="s" class="assistive-text"><?php _ex( 'Search', 'assistive text', '_s' ); ?></label>
+		<label for="s" class="screen-reader-text"><?php _ex( 'Search', 'assistive text', '_s' ); ?></label>
 		<input type="search" class="field" name="s" value="<?php echo esc_attr( get_search_query() ); ?>" id="s" placeholder="<?php echo esc_attr_x( 'Search &hellip;', 'placeholder', '_s' ); ?>" />
 		<input type="submit" class="submit" id="searchsubmit" value="<?php echo esc_attr_x( 'Search', 'submit button', '_s' ); ?>" />
 	</form>
diff --git a/style.css b/style.css
index 04789be..f0df770 100644
--- a/style.css
+++ b/style.css
@@ -341,12 +341,32 @@ a:active {
 }
 
 /* Text meant only for screen readers */
-.assistive-text {
-	clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
+.screen-reader-text {
 	clip: rect(1px, 1px, 1px, 1px);
 	position: absolute !important;
 }
 
+.screen-reader-text:hover,
+.screen-reader-text:active,
+.screen-reader-text:focus {
+	background-color: #f1f1f1;
+	border-radius: 3px;
+	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
+	clip: auto !important;
+	color: #21759b;
+	display: block;
+	font-size: 14px;
+	font-weight: bold;
+	height: auto;
+	left: 5px;
+	line-height: normal;
+	padding: 15px 23px 14px;
+	text-decoration: none;
+	top: 5px;
+	width: auto;
+	z-index: 100000; /* Above WP toolbar */
+}
+
 /* Clearing */
 .clear:before,
 .clear:after,