Add "Skip to toolbar" accessibility shortcut, see #21471

git-svn-id: http://core.svn.wordpress.org/trunk@21423 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
azaozz 2012-08-05 18:41:52 +00:00
parent de3514a705
commit 6bf5d66d5b
3 changed files with 31 additions and 4 deletions

View File

@ -638,7 +638,7 @@ function wp_admin_bar_search_menu( $wp_admin_bar ) {
return;
$form = '<form action="' . esc_url( home_url( '/' ) ) . '" method="get" id="adminbarsearch">';
$form .= '<input class="adminbar-input" name="s" id="adminbar-search" tabindex="10" type="text" value="" maxlength="150" />';
$form .= '<input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" />';
$form .= '<input type="submit" class="adminbar-button" value="' . __('Search') . '"/>';
$form .= '</form>';

View File

@ -348,7 +348,8 @@ class WP_Admin_Bar {
?>
<div id="wpadminbar" class="<?php echo $class; ?>" role="navigation">
<div class="quicklinks">
<a id="wpadminbar-shortcut" href="#wp-toolbar" tabindex="1"><?php _e('Skip to toolbar'); ?></a>
<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="<?php esc_attr_e('Top navigation toolbar.'); ?>">
<?php foreach ( $root->children as $group ) {
$this->_render_group( $group );
} ?>
@ -395,10 +396,10 @@ class WP_Admin_Bar {
$is_parent = ! empty( $node->children );
$has_link = ! empty( $node->href );
$tabindex = isset( $node->meta['tabindex'] ) ? (int) $node->meta['tabindex'] : 10;
$tabindex = isset( $node->meta['tabindex'] ) ? (int) $node->meta['tabindex'] : '';
$aria_attributes = $tabindex ? 'tabindex="' . $tabindex . '"' : '';
$menuclass = '';
$aria_attributes = 'tabindex="' . $tabindex . '"';
if ( $is_parent ) {
$menuclass = 'menupop ';

View File

@ -606,6 +606,32 @@
}
}
/* Skip link */
#wpadminbar #wpadminbar-shortcut {
position: absolute;
left: -1000em;
top: -1000em;
height: 1px;
width: 1px;
overflow: hidden;
padding: 0;
margin: 0;
}
#wpadminbar #wpadminbar-shortcut:focus {
left: 0;
top: 0;
height: auto;
width: auto;
display: block;
padding: 10px 15px;
background: #fff;
color: #000;
outline: none;
z-index: 100000;
text-shadow: none;
}
/**
* IE 6-targeted rules
*/