From 848ca6e31562fc65da891cce9046853bd16564eb Mon Sep 17 00:00:00 2001
From: "Patrick H. Lauke" <redux@splintered.co.uk>
Date: Wed, 2 Jan 2013 22:39:21 +0000
Subject: Basic keyboard accessibility CSS tweaks

Mostly doubling-up :hover styles to also cover :focus, as a first step
to making the framework more keyboard-friendly.
Additionally, fixed two small markup issues in the docs/examples to
make the "Learn more" large primary button-styled links
keyboard-focusable (as without href they're treated as non-tabable
anchors).
---
 less/dropdowns.less | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

(limited to 'less/dropdowns.less')

diff --git a/less/dropdowns.less b/less/dropdowns.less
index a0d4b1fd0..13490a637 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -83,11 +83,12 @@
   }
 }
 
-// Hover state
+// Hover/Focus state
 // -----------
 .dropdown-menu > li > a:hover,
 .dropdown-menu > li > a:focus,
-.dropdown-submenu:hover > a {
+.dropdown-submenu:hover > a,
+.dropdown-submenu:focus > a {
   text-decoration: none;
   color: @dropdownLinkColorHover;
   #gradient > .vertical(@dropdownLinkBackgroundHover, darken(@dropdownLinkBackgroundHover, 5%));
@@ -96,7 +97,8 @@
 // Active state
 // ------------
 .dropdown-menu > .active > a,
-.dropdown-menu > .active > a:hover {
+.dropdown-menu > .active > a:hover,
+.dropdown-menu > .active > a:focus {
   color: @dropdownLinkColorActive;
   text-decoration: none;
   outline: 0;
@@ -105,13 +107,15 @@
 
 // Disabled state
 // --------------
-// Gray out text and ensure the hover state remains gray
+// Gray out text and ensure the hover/focus state remains gray
 .dropdown-menu > .disabled > a,
-.dropdown-menu > .disabled > a:hover {
+.dropdown-menu > .disabled > a:hover,
+.dropdown-menu > .disabled > a:focus {
   color: @grayLight;
 }
-// Nuke hover effects
-.dropdown-menu > .disabled > a:hover {
+// Nuke hover/focus effects
+.dropdown-menu > .disabled > a:hover
+.dropdown-menu > .disabled > a:focus {
   text-decoration: none;
   background-color: transparent;
   background-image: none; // Remove CSS gradient
-- 
cgit v1.2.3