Ticket #21471: 21471.3.diff

wp-includes/js/admin-bar.js

@@ -66 +66 @@
                         e.preventDefault();
                         $('html, body').animate({ scrollTop: 0 }, 'fast');
                 });
+                
+                $('.screen-reader-shortcut').keydown(function (e) {
+                        var thisHref = $(this).attr('href');
+                        if ( 13 == e.which && thisHref.substring(0, 1) == "#" ) {
+                                setTimeout(function () {
+                                        $(thisHref).focus();
+                                }, 100);
+                        }
+                });
 
         });
 } else {

wp-includes/css/admin-bar.css

@@ -608 +608 @@
 }
 
 #wpadminbar .screen-reader-shortcut:focus {
-        left: 5px;
-        top: 5px;
+        left: 6px;
+        top: 7px;
         height: auto;
         width: auto;
         display: block;
-        padding: 10px 15px;
-        background: #fff;
-        color: #000;
-        border: 2px solid #333;
+        font-size: 14px;
+        font-weight: bold;
+        padding: 15px 23px 14px;
+        background: #f3f3f3;
+        background-image: -webkit-gradient(linear, left top, left bottom, from(#8cc1ea), to(#72a7cf));
+        background-image: -webkit-linear-gradient(top, #8cc1ea, #72a7cf);
+        background-image:    -moz-linear-gradient(top, #8cc1ea, #72a7cf);
+        background-image:      -o-linear-gradient(top, #8cc1ea, #72a7cf);
+        background-image:   linear-gradient(to bottom, #8cc1ea, #72a7cf);
+        color: #fff;
         border-radius: 3px;
         z-index: 100000;
-        text-shadow: none;
+        text-shadow: 0 -1px 0 rgba(22, 57, 81, 0.3);
         line-height: normal;
+        -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
+        box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
+        text-decoration: none;
 }
 
 #wpadminbar a.screen-reader-shortcut {

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

@@ -349 +349 @@
                 ?>
                 <div id="wpadminbar" class="<?php echo $class; ?>" role="navigation">
                         <a class="screen-reader-text screen-reader-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.'); ?>">
+                        <div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="<?php esc_attr_e('Top navigation toolbar.'); ?>" tabindex="0">
                                 <?php foreach ( $root->children as $group ) {
                                         $this->_render_group( $group );
                                 } ?>

wp-admin/admin-header.php

@@ -126 +126 @@
 
 ?>
 
-<div id="wpbody-content" aria-label="<?php esc_attr_e('Main content'); ?>">
+<div id="wpbody-content" aria-label="<?php esc_attr_e('Main content'); ?>" tabindex="0">
 <?php
 
 $current_screen->render_screen_meta();

wp-admin/css/wp-admin.css

@@ -192 +192 @@
 .screen-reader-text span {
         position: absolute;
         left: -1000em;
+        top: -1000em;
         height: 1px;
         width: 1px;
         overflow: hidden;
 }
 
 .screen-reader-shortcut:focus {
-        left: 5px;
-        top: 5px;
+        left: 6px;
+        top: -21px;
         height: auto;
         width: auto;
         display: block;
-        padding: 10px 15px;
-        background: #fff;
-        color: #000;
-        border: 2px solid #333;
+        font-size: 14px;
+        font-weight: bold;
+        padding: 15px 23px 14px;
+        background: #f3f3f3;
+        background-image: -webkit-gradient(linear, left top, left bottom, from(#8cc1ea), to(#72a7cf));
+        background-image: -webkit-linear-gradient(top, #8cc1ea, #72a7cf);
+        background-image:    -moz-linear-gradient(top, #8cc1ea, #72a7cf);
+        background-image:      -o-linear-gradient(top, #8cc1ea, #72a7cf);
+        background-image:   linear-gradient(to bottom, #8cc1ea, #72a7cf);
+        color: #fff;
         border-radius: 3px;
         z-index: 100000;
+        text-shadow: 0 -1px 0 rgba(22, 57, 81, 0.3);
+        line-height: normal;
+        -webkit-box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
+        box-shadow: 0 0 2px 2px rgba(0,0,0,.6);
+        text-decoration: none;
 }
 
 .hidden,