Merge pull request foundation#106 from goulvench/master

Restoring keyboard accessibility to anchors and buttons with focus states
l4u · Nov 18, 2011 · 5dcd566 · 5dcd566
2 parents 331477d + 3bb834d
commit 5dcd566
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/stylesheets/globals.css b/stylesheets/globals.css
@@ -77,8 +77,10 @@
 /*	--------------------------------------------------
 	:: Links
 	-------------------------------------------------- */
-	a { color: #2a85e8; text-decoration: none; outline: 0; line-height: inherit; }
+	a { color: #2a85e8; text-decoration: none; line-height: inherit; }
 	a:hover { color: #11639d; }
+	a:focus { color: #cc4714; }
+	a:hover, a:active { outline: none; overflow: hidden; }
 	p a, p a:visited { line-height: inherit; }
 
 

diff --git a/stylesheets/ui.css b/stylesheets/ui.css
@@ -99,11 +99,11 @@
 	.nice.black.button	{ border: 1px solid #000; }
 
 	/* Hovers ---------- */
-	.button:hover 			{ background-color: #0192dd; color: #fff; }
-	.blue.button:hover		{ background-color: #0192dd; 	}
-	.red.button:hover 		{ background-color: #d01217; 	}
-	.white.button:hover		{ background-color: #dadada; color: #333; }
-	.black.button:hover	{ background-color: #000; }
+	.button:hover,.button:focus 			{ background-color: #0192dd; color: #fff; }
+	.blue.button:hover,.blue.button:focus		{ background-color: #0192dd; 	}
+	.red.button:hover,.red.button:focus 		{ background-color: #d01217; 	}
+	.white.button:hover.white.button:focus		{ background-color: #dadada; color: #333; }
+	.black.button:hover,.black.button:focus	{ background-color: #000; }
 
 
 	/* Disabled ---------- */
@@ -121,7 +121,7 @@
 	.alert-box.error { background-color: #c00000; color: #fff; text-shadow: 0px -1px rgba(0,0,0,0.3); }
 
 	.alert-box a.close { color: #000; position: absolute; right: 4px; top: 0px; font-size: 18px; opacity: 0.2; padding: 4px; }
-	.alert-box a.close:hover { opacity: 0.4; }
+	.alert-box a.close:hover,.alert-box a.close:focus { opacity: 0.4; }
 
 
 
@@ -168,9 +168,9 @@
     ul.pagination { display: block; height: 24px; margin-left: -5px; }
     ul.pagination li { float: left; display: block; height: 24px; color: #999; font-size: 15px; margin-left: 5px; }
     ul.pagination li a { display: block; padding: 6px 7px 4px; color: #555; }
-    ul.pagination li.current a, ul.pagination li:hover a { border-bottom: solid 2px #00a6fc; color: #141414; }
+    ul.pagination li.current a, ul.pagination li:hover a, ul.pagination li a:focus { border-bottom: solid 2px #00a6fc; color: #141414; }
     ul.pagination li.unavailable a { cursor: default; color: #999; }
-    ul.pagination li.unavailable:hover a { border-bottom: none; }
+    ul.pagination li.unavailable:hover a, ul.pagination li.unavailable a:focus { border-bottom: none; }
 
 
 /*  --------------------------------------------------