From 7c30ff0dcb0ab6fcb9295a6b4e2a2033391ec4e5 Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Tue, 16 Oct 2012 21:26:59 +0000
Subject: [PATCH] Accessibility shortcuts: new looks and fix for the WebKit
 focus bug, props lessbloat, fixes #21471

git-svn-id: https://develop.svn.wordpress.org/trunk@22249 602fd350-edb4-49c9-b593-d223f7449a82
---
 wp-admin/admin-header.php          |  2 +-
 wp-admin/css/wp-admin.css          | 24 ++++++++++++++++++------
 wp-admin/js/common.js              |  6 ++++++
 wp-includes/class-wp-admin-bar.php |  2 +-
 wp-includes/css/admin-bar.css      | 27 ++++++++++++++++-----------
 wp-includes/js/admin-bar.js        | 13 +++++++++++++
 6 files changed, 55 insertions(+), 19 deletions(-)

diff --git a/wp-admin/admin-header.php b/wp-admin/admin-header.php
index b01b468dfd..183381f7ac 100644
--- a/wp-admin/admin-header.php
+++ b/wp-admin/admin-header.php
@@ -126,7 +126,7 @@ $current_screen->set_parentage( $parent_file );
 
 ?>
 
-<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();
diff --git a/wp-admin/css/wp-admin.css b/wp-admin/css/wp-admin.css
index 04b7913907..5c0e2a4e30 100644
--- a/wp-admin/css/wp-admin.css
+++ b/wp-admin/css/wp-admin.css
@@ -192,23 +192,35 @@ TABLE OF CONTENTS:
 .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: #8cc1ea;
+	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,
diff --git a/wp-admin/js/common.js b/wp-admin/js/common.js
index 31f8b8f39c..2a62179b12 100644
--- a/wp-admin/js/common.js
+++ b/wp-admin/js/common.js
@@ -369,6 +369,12 @@ $(document).ready( function() {
 	$(document).on('click.wp-accessibility-blur', 'a', function() {
 		$(this).blur();
 	});
+
+	// Scroll into view when focused
+	$('#contextual-help-link, #show-settings-link').on( 'focus.scroll-into-view', function(e){
+		if ( e.target.scrollIntoView )
+			e.target.scrollIntoView(false);
+	});
 });
 
 // internal use
diff --git a/wp-includes/class-wp-admin-bar.php b/wp-includes/class-wp-admin-bar.php
index fe3b1f0367..77479d5dc6 100644
--- a/wp-includes/class-wp-admin-bar.php
+++ b/wp-includes/class-wp-admin-bar.php
@@ -349,7 +349,7 @@ class WP_Admin_Bar {
 		?>
 		<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 );
 				} ?>
diff --git a/wp-includes/css/admin-bar.css b/wp-includes/css/admin-bar.css
index 907aeadb55..192722a9d9 100644
--- a/wp-includes/css/admin-bar.css
+++ b/wp-includes/css/admin-bar.css
@@ -608,23 +608,28 @@
 }
 
 #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: #8cc1ea;
+	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;
-}
-
-#wpadminbar a.screen-reader-shortcut {
-	text-decoration: underline;
+	-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;
 }
 
 /**
diff --git a/wp-includes/js/admin-bar.js b/wp-includes/js/admin-bar.js
index 0479c56cd4..7cd03d4ba1 100644
--- a/wp-includes/js/admin-bar.js
+++ b/wp-includes/js/admin-bar.js
@@ -67,6 +67,19 @@ if ( typeof(jQuery) != 'undefined' ) {
 			$('html, body').animate({ scrollTop: 0 }, 'fast');
 		});
 
+		// fix focus bug in WebKit
+		$('.screen-reader-shortcut').keydown( function(e) {
+			if ( 13 != e.which )
+				return;
+
+			var id = $(this).attr('href');
+
+			if ( $.browser.webkit && id && id.charAt(0) == '#' ) {
+				setTimeout(function () {
+					$(id).focus();
+				}, 100);
+			}
+		});
 	});
 } else {
 	(function(d, w) {