Accessibility: fix the Skip to content link, show it on :focus, improve the styling of the skip links when shown, see #21310, see #21471

git-svn-id: http://core.svn.wordpress.org/trunk@21435 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
azaozz 2012-08-05 21:37:57 +00:00
parent 09c319a557
commit c368f0e6a1
4 changed files with 21 additions and 10 deletions

View File

@ -107,7 +107,7 @@ if ( wp_script_is( 'customize-loader', 'queue' ) && current_user_can( 'edit_them
?>
<div id="wpwrap">
<a id="wpbody-content-shortcut" tabindex="5" href="#wpbody-content" class="hide-if-no-js screen-reader-text"><?php _e('Skip to main content'); ?></a>
<a tabindex="1" href="#wpbody-content" class="screen-reader-text screen-reader-shortcut"><?php _e('Skip to main content'); ?></a>
<?php require(ABSPATH . 'wp-admin/menu-header.php'); ?>
<div id="wpcontent">
@ -123,7 +123,7 @@ $current_screen->set_parentage( $parent_file );
?>
<div id="wpbody-content" tabindex="-1" aria-label="<?php esc_attr_e('Main content'); ?>">
<div id="wpbody-content" aria-label="<?php esc_attr_e('Main content'); ?>">
<?php
$current_screen->render_screen_meta();

View File

@ -198,6 +198,20 @@ TABLE OF CONTENTS:
overflow: hidden;
}
.screen-reader-shortcut:focus {
left: 5px;
top: 5px;
height: auto;
width: auto;
display: block;
padding: 10px 15px;
background: #fff;
color: #000;
border: 2px solid #333;
border-radius: 3px;
z-index: 100000;
}
.hidden,
.js .closed .inside,
.js .hide-if-js,

View File

@ -374,11 +374,6 @@ $(document).ready( function() {
pageInput.val('1');
});
}
$('#wpbody-content-shortcut').bind('click.wp-skip-to-content', function(e){
$('#wpbody-content').focus();
e.preventDefault();
});
});
// internal use

View File

@ -619,17 +619,19 @@
}
#wpadminbar #wpadminbar-shortcut:focus {
left: 0;
top: 0;
left: 5px;
top: 5px;
height: auto;
width: auto;
display: block;
padding: 10px 15px;
background: #fff;
color: #000;
outline: none;
border: 2px solid #333;
border-radius: 3px;
z-index: 100000;
text-shadow: none;
line-height: normal;
}
/**