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
This commit is contained in:
Lance Willett 2012-10-11 17:17:55 +00:00
parent a2befeb6a8
commit d6950e7b01
2 changed files with 18 additions and 5 deletions

View File

@ -38,7 +38,7 @@
<nav id="site-navigation" class="main-navigation" role="navigation"> <nav id="site-navigation" class="main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3> <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' ) ); ?> <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation --> </nav><!-- #site-navigation -->

View File

@ -460,12 +460,27 @@ a:hover {
} }
/* Assistive text */ /* Assistive text */
.skip-link,
.screen-reader-text,
.assistive-text { .assistive-text {
position: absolute !important; position: absolute !important;
clip: rect(1px, 1px, 1px, 1px); 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 */ /* Page structure */
.site { .site {
@ -1650,8 +1665,6 @@ img#wpstats {
/* =IE 7 and 8 /* =IE 7 and 8
----------------------------------------------- */ ----------------------------------------------- */
.ie .skip-link,
.ie .screen-reader-text,
.ie .assistive-text { .ie .assistive-text {
clip: rect(1px 1px 1px 1px); /* IE7 */ clip: rect(1px 1px 1px 1px); /* IE7 */
} }