From f0d18a35dd23f96251e380a3a41ba6a2e9697f87 Mon Sep 17 00:00:00 2001
From: Andrew Ozz <azaozz@git.wordpress.org>
Date: Wed, 15 Aug 2012 18:40:11 +0000
Subject: [PATCH] Add :focus style to all links, use JS to blur() them on click
 so the style is only visible when tabbing, props lessbloat, see #21324

git-svn-id: https://develop.svn.wordpress.org/trunk@21529 602fd350-edb4-49c9-b593-d223f7449a82
---
 wp-admin/css/colors-classic.dev.css | 46 ++++++++++++++++++++++++++---
 wp-admin/css/colors-fresh.dev.css   | 46 ++++++++++++++++++++++++++---
 wp-admin/css/wp-admin.dev.css       |  1 -
 wp-admin/js/common.dev.js           |  5 ++++
 4 files changed, 89 insertions(+), 9 deletions(-)

diff --git a/wp-admin/css/colors-classic.dev.css b/wp-admin/css/colors-classic.dev.css
index 60b2b7fe36..075ce95b22 100644
--- a/wp-admin/css/colors-classic.dev.css
+++ b/wp-admin/css/colors-classic.dev.css
@@ -247,10 +247,15 @@ strong .post-com-count span {
 	color: #174f69;
 }
 
-.wrap .add-new-h2 {
+.wrap .add-new-h2,
+.wrap .add-new-h2:active {
 	background: #f1f1f1;
 }
 
+.wrap .add-new-h2:focus {
+	background: #c7e7fd;
+}
+
 .subtitle {
 	color: #777;
 }
@@ -465,11 +470,24 @@ a.button.disabled {
 }
 
 a:hover,
-a:active,
-a:focus {
+a:active {
 	color: #d54e21;
 }
 
+a:focus {
+	background: #c7e7fd;
+	color: #124964;
+}
+
+a:active {
+	background: none;
+	outline: thin dotted;
+}
+
+#adminmenu a:active {
+	outline: none;
+}
+
 #adminmenu a:hover,
 #adminmenu li.menu-top > a:focus,
 #adminmenu ul.wp-submenu a:hover,
@@ -591,10 +609,21 @@ h3.dashboard-widget-title small,
 	color: #333;
 }
 
-th.sortable a:hover, th.sortable a:active, th.sortable a:focus {
+th.sortable a:hover,
+th.sortable a:active,
+th.sortable a:focus {
 	color: #333;
 }
 
+th.sortable a:focus {
+	background: #e1e1e1;
+	background-image: -webkit-gradient(linear, left bottom, left top, from(#dcdcdc), to(#e9e9e9));
+	background-image: -webkit-linear-gradient(bottom, #dcdcdc, #e9e9e9);
+	background-image:    -moz-linear-gradient(bottom, #dcdcdc, #e9e9e9);
+	background-image:      -o-linear-gradient(bottom, #dcdcdc, #e9e9e9);
+	background-image: linear-gradient(to top, #dcdcdc, #e9e9e9);
+}
+
 h3.dashboard-widget-title small a {
 	color: #d7d7d7;
 }
@@ -1851,6 +1880,15 @@ table.diff .diff-addedline ins {
 	background: transparent url(../images/arrows-vs.png) no-repeat right 4px;
 }
 
+#screen-meta-links a:focus {
+	background: #c7e7fd url(../images/arrows.png) no-repeat right 4px;
+	color: #124964;
+}
+
+#screen-meta-links a:active {
+	background-color: transparent url(../images/arrows.png) no-repeat right 4px;
+}
+
 #screen-meta-links a.show-settings.screen-meta-active  {
 	background: transparent url(../images/arrows-vs.png) no-repeat right -31px;
 }
diff --git a/wp-admin/css/colors-fresh.dev.css b/wp-admin/css/colors-fresh.dev.css
index d86c019d87..90930e0702 100644
--- a/wp-admin/css/colors-fresh.dev.css
+++ b/wp-admin/css/colors-fresh.dev.css
@@ -238,10 +238,15 @@ strong .post-com-count span {
 	color: #464646;
 }
 
-.wrap .add-new-h2 {
+.wrap .add-new-h2,
+.wrap .add-new-h2:active {
 	background: #f1f1f1;
 }
 
+.wrap .add-new-h2:focus {
+	background: #c7e7fd;
+}
+
 .subtitle {
 	color: #777;
 }
@@ -456,11 +461,24 @@ a.button.disabled {
 }
 
 a:hover,
-a:active,
-a:focus {
+a:active {
 	color: #d54e21;
 }
 
+a:focus {
+	background: #c7e7fd;
+	color: #124964;
+}
+
+a:active {
+	background: none;
+	outline: thin dotted;
+}
+
+#adminmenu a:active {
+	outline: none;
+}
+
 #adminmenu a:hover,
 #adminmenu li.menu-top > a:focus,
 #adminmenu ul.wp-submenu a:hover,
@@ -582,10 +600,21 @@ h3.dashboard-widget-title small,
 	color: #333;
 }
 
-th.sortable a:hover, th.sortable a:active, th.sortable a:focus {
+th.sortable a:hover,
+th.sortable a:active,
+th.sortable a:focus {
 	color: #333;
 }
 
+th.sortable a:focus {
+	background: #e1e1e1;
+	background-image: -webkit-gradient(linear, left bottom, left top, from(#dcdcdc), to(#e9e9e9));
+	background-image: -webkit-linear-gradient(bottom, #dcdcdc, #e9e9e9);
+	background-image:    -moz-linear-gradient(bottom, #dcdcdc, #e9e9e9);
+	background-image:      -o-linear-gradient(bottom, #dcdcdc, #e9e9e9);
+	background-image: linear-gradient(to top, #dcdcdc, #e9e9e9);
+}
+
 h3.dashboard-widget-title small a {
 	color: #d7d7d7;
 }
@@ -864,6 +893,15 @@ table.widefat span.spam a,
 	background: transparent url(../images/arrows.png) no-repeat right 4px;
 }
 
+#screen-meta-links a:focus {
+	background: #c7e7fd url(../images/arrows.png) no-repeat right 4px;
+	color: #124964;
+}
+
+#screen-meta-links a:active {
+	background-color: transparent url(../images/arrows.png) no-repeat right 4px;
+}
+
 #screen-meta-links a.show-settings.screen-meta-active {
 	background: transparent url(../images/arrows.png) no-repeat right -31px;
 }
diff --git a/wp-admin/css/wp-admin.dev.css b/wp-admin/css/wp-admin.dev.css
index e9d44968cd..42086631aa 100644
--- a/wp-admin/css/wp-admin.dev.css
+++ b/wp-admin/css/wp-admin.dev.css
@@ -453,7 +453,6 @@ code {
 
 .subsubsub a.current {
 	font-weight: bold;
-	background: none;
 	border: none;
 }
 
diff --git a/wp-admin/js/common.dev.js b/wp-admin/js/common.dev.js
index 430357de5d..50cb5e3885 100644
--- a/wp-admin/js/common.dev.js
+++ b/wp-admin/js/common.dev.js
@@ -375,6 +375,11 @@ $(document).ready( function() {
 				pageInput.val('1');
 		});
 	}
+
+	// Blur accessibility link background color onclick
+	$(document).on('click.wp-accessibility-blur', 'a', function() {
+		$(this).blur();
+	});
 });
 
 // internal use