Permalink
Browse files

_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.
  • Loading branch information...
1 parent bdecbd3 commit 1ba2f627521385f91110f89b6d457d57c96a6d12 @obenland obenland committed Mar 13, 2013
Showing with 27 additions and 7 deletions.
  1. +2 −2 comments.php
  2. +1 −1 header.php
  3. +1 −1 inc/template-tags.php
  4. +1 −1 searchform.php
  5. +22 −2 style.css
View
@@ -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 -->
View
@@ -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 -->
View
@@ -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 ?>
View
@@ -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>
View
@@ -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,

0 comments on commit 1ba2f62

Please sign in to comment.