Changeset 21423

Timestamp:

08/05/2012 06:41:52 PM (12 years ago)

Author:

azaozz

Message:

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

Location:

trunk/wp-includes

Files:

• admin-bar.php (modified) (1 diff)
• class-wp-admin-bar.php (modified) (2 diffs)
• css/admin-bar.dev.css (modified) (1 diff)

trunk/wp-includes/admin-bar.php

@@ -639 +639 @@
 
     $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>';

trunk/wp-includes/class-wp-admin-bar.php

@@ -349 +349 @@
         ?>
         <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 );
@@ -396 +397 @@
         $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 ) {

trunk/wp-includes/css/admin-bar.dev.css

@@ -607 +607 @@
 }
 
+/* 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