rayelliott
/
_s
Archived
forked from mirror/_s
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

_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.
This commit is contained in:
obenland 2013-03-13 15:39:05 -07:00
parent bdecbd3734
commit 1ba2f62752
5 changed files with 27 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
comments.php
View File

@ -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 -->

2
header.php
View File

@ -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 -->

2
inc/template-tags.php
View File

@ -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 ?>

2
searchform.php
View File

@ -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>

24
style.css
View File

@ -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,