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).

docs/assets/css/bootstrap-responsive.css

@@ -7,22 +7,18 @@
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
  */
-
 .clearfix {
   *zoom: 1;
 }
-
 .clearfix:before,
 .clearfix:after {
   display: table;
-  line-height: 0;
   content: "";
+  line-height: 0;
 }
-
 .clearfix:after {
   clear: both;
 }
-
 .hide-text {
   font: 0/0 a;
   color: transparent;
@@ -30,7 +26,6 @@
   background-color: transparent;
   border: 0;
 }
-
 .input-block-level {
   display: block;
   width: 100%;
@@ -39,32 +34,25 @@
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
-
 @-ms-viewport {
   width: device-width;
 }
-
 .hidden {
   display: none;
   visibility: hidden;
 }
-
 .visible-phone {
   display: none !important;
 }
-
 .visible-tablet {
   display: none !important;
 }
-
 .hidden-desktop {
   display: none !important;
 }
-
 .visible-desktop {
   display: inherit !important;
 }
-
 @media (min-width: 768px) and (max-width: 979px) {
   .hidden-desktop {
     display: inherit !important;
@@ -79,7 +67,6 @@
     display: none !important;
   }
 }
-
 @media (max-width: 767px) {
   .hidden-desktop {
     display: inherit !important;
@@ -94,7 +81,6 @@
     display: none !important;
   }
 }
-
 @media (min-width: 1200px) {
   .row {
     margin-left: -30px;
@@ -103,8 +89,8 @@
   .row:before,
   .row:after {
     display: table;
-    line-height: 0;
     content: "";
+    line-height: 0;
   }
   .row:after {
     clear: both;
@@ -199,22 +185,22 @@
   .row-fluid:before,
   .row-fluid:after {
     display: table;
-    line-height: 0;
     content: "";
+    line-height: 0;
   }
   .row-fluid:after {
     clear: both;
   }
   .row-fluid [class*="span"] {
     display: block;
-    float: left;
     width: 100%;
     min-height: 30px;
-    margin-left: 2.564102564102564%;
-    *margin-left: 2.5109110747408616%;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
+    float: left;
+    margin-left: 2.564102564102564%;
+    *margin-left: 2.5109110747408616%;
   }
   .row-fluid [class*="span"]:first-child {
     margin-left: 0;
@@ -374,64 +360,40 @@
   .controls-row [class*="span"] + [class*="span"] {
     margin-left: 30px;
   }
-  input.span12,
+  input.span12, textarea.span12, .uneditable-input.span12 {
-  textarea.span12,
-  .uneditable-input.span12 {
     width: 1156px;
   }
-  input.span11,
+  input.span11, textarea.span11, .uneditable-input.span11 {
-  textarea.span11,
-  .uneditable-input.span11 {
     width: 1056px;
   }
-  input.span10,
+  input.span10, textarea.span10, .uneditable-input.span10 {
-  textarea.span10,
-  .uneditable-input.span10 {
     width: 956px;
   }
-  input.span9,
+  input.span9, textarea.span9, .uneditable-input.span9 {
-  textarea.span9,
-  .uneditable-input.span9 {
     width: 856px;
   }
-  input.span8,
+  input.span8, textarea.span8, .uneditable-input.span8 {
-  textarea.span8,
-  .uneditable-input.span8 {
     width: 756px;
   }
-  input.span7,
+  input.span7, textarea.span7, .uneditable-input.span7 {
-  textarea.span7,
-  .uneditable-input.span7 {
     width: 656px;
   }
-  input.span6,
+  input.span6, textarea.span6, .uneditable-input.span6 {
-  textarea.span6,
-  .uneditable-input.span6 {
     width: 556px;
   }
-  input.span5,
+  input.span5, textarea.span5, .uneditable-input.span5 {
-  textarea.span5,
-  .uneditable-input.span5 {
     width: 456px;
   }
-  input.span4,
+  input.span4, textarea.span4, .uneditable-input.span4 {
-  textarea.span4,
-  .uneditable-input.span4 {
     width: 356px;
   }
-  input.span3,
+  input.span3, textarea.span3, .uneditable-input.span3 {
-  textarea.span3,
-  .uneditable-input.span3 {
     width: 256px;
   }
-  input.span2,
+  input.span2, textarea.span2, .uneditable-input.span2 {
-  textarea.span2,
-  .uneditable-input.span2 {
     width: 156px;
   }
-  input.span1,
+  input.span1, textarea.span1, .uneditable-input.span1 {
-  textarea.span1,
-  .uneditable-input.span1 {
     width: 56px;
   }
   .thumbnails {
@@ -444,7 +406,6 @@
     margin-left: 0;
   }
 }
-
 @media (min-width: 768px) and (max-width: 979px) {
   .row {
     margin-left: -20px;
@@ -453,8 +414,8 @@
   .row:before,
   .row:after {
     display: table;
-    line-height: 0;
     content: "";
+    line-height: 0;
   }
   .row:after {
     clear: both;
@@ -549,22 +510,22 @@
   .row-fluid:before,
   .row-fluid:after {
     display: table;
-    line-height: 0;
     content: "";
+    line-height: 0;
   }
   .row-fluid:after {
     clear: both;
   }
   .row-fluid [class*="span"] {
     display: block;
-    float: left;
     width: 100%;
     min-height: 30px;
-    margin-left: 2.7624309392265194%;
-    *margin-left: 2.709239449864817%;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
+    float: left;
+    margin-left: 2.7624309392265194%;
+    *margin-left: 2.709239449864817%;
   }
   .row-fluid [class*="span"]:first-child {
     margin-left: 0;
@@ -724,86 +685,61 @@
   .controls-row [class*="span"] + [class*="span"] {
     margin-left: 20px;
   }
-  input.span12,
+  input.span12, textarea.span12, .uneditable-input.span12 {
-  textarea.span12,
-  .uneditable-input.span12 {
     width: 710px;
   }
-  input.span11,
+  input.span11, textarea.span11, .uneditable-input.span11 {
-  textarea.span11,
-  .uneditable-input.span11 {
     width: 648px;
   }
-  input.span10,
+  input.span10, textarea.span10, .uneditable-input.span10 {
-  textarea.span10,
-  .uneditable-input.span10 {
     width: 586px;
   }
-  input.span9,
+  input.span9, textarea.span9, .uneditable-input.span9 {
-  textarea.span9,
-  .uneditable-input.span9 {
     width: 524px;
   }
-  input.span8,
+  input.span8, textarea.span8, .uneditable-input.span8 {
-  textarea.span8,
-  .uneditable-input.span8 {
     width: 462px;
   }
-  input.span7,
+  input.span7, textarea.span7, .uneditable-input.span7 {
-  textarea.span7,
-  .uneditable-input.span7 {
     width: 400px;
   }
-  input.span6,
+  input.span6, textarea.span6, .uneditable-input.span6 {
-  textarea.span6,
-  .uneditable-input.span6 {
     width: 338px;
   }
-  input.span5,
+  input.span5, textarea.span5, .uneditable-input.span5 {
-  textarea.span5,
-  .uneditable-input.span5 {
     width: 276px;
   }
-  input.span4,
+  input.span4, textarea.span4, .uneditable-input.span4 {
-  textarea.span4,
-  .uneditable-input.span4 {
     width: 214px;
   }
-  input.span3,
+  input.span3, textarea.span3, .uneditable-input.span3 {
-  textarea.span3,
-  .uneditable-input.span3 {
     width: 152px;
   }
-  input.span2,
+  input.span2, textarea.span2, .uneditable-input.span2 {
-  textarea.span2,
-  .uneditable-input.span2 {
     width: 90px;
   }
-  input.span1,
+  input.span1, textarea.span1, .uneditable-input.span1 {
-  textarea.span1,
-  .uneditable-input.span1 {
     width: 28px;
   }
 }
-
 @media (max-width: 767px) {
   body {
-    padding-right: 20px;
     padding-left: 20px;
+    padding-right: 20px;
   }
   .navbar-fixed-top,
   .navbar-fixed-bottom,
   .navbar-static-top {
-    margin-right: -20px;
     margin-left: -20px;
+    margin-right: -20px;
   }
   .container-fluid {
     padding: 0;
   }
   .dl-horizontal dt {
     float: none;
-    width: auto;
     clear: none;
+    width: auto;
     text-align: left;
   }
   .dl-horizontal dd {
@@ -826,8 +762,8 @@
   [class*="span"],
   .uneditable-input[class*="span"],
   .row-fluid [class*="span"] {
-    display: block;
     float: none;
+    display: block;
     width: 100%;
     margin-left: 0;
     -webkit-box-sizing: border-box;
@@ -871,8 +807,8 @@
   .modal {
     position: fixed;
     top: 20px;
-    right: 20px;
     left: 20px;
+    right: 20px;
     width: auto;
     margin: 0;
   }
@@ -883,7 +819,6 @@
     top: 20px;
   }
 }
-
 @media (max-width: 480px) {
   .nav-collapse {
     -webkit-transform: translate3d(0, 0, 0);
@@ -909,13 +844,13 @@
     padding-top: 0;
   }
   .form-horizontal .form-actions {
-    padding-right: 10px;
     padding-left: 10px;
+    padding-right: 10px;
   }
   .media .pull-left,
   .media .pull-right {
-    display: block;
     float: none;
+    display: block;
     margin-bottom: 10px;
   }
   .media-object {
@@ -924,8 +859,8 @@
   }
   .modal {
     top: 10px;
-    right: 10px;
     left: 10px;
+    right: 10px;
   }
   .modal-header .close {
     padding: 10px;
@@ -935,7 +870,6 @@
     position: static;
   }
 }
-
 @media (max-width: 979px) {
   body {
     padding-top: 0;
@@ -959,8 +893,8 @@
     padding: 0;
   }
   .navbar .brand {
-    padding-right: 10px;
     padding-left: 10px;
+    padding-right: 10px;
     margin: 0 0 0 -5px;
   }
   .nav-collapse {
@@ -1003,7 +937,9 @@
     margin-bottom: 2px;
   }
   .nav-collapse .nav > li > a:hover,
-  .nav-collapse .dropdown-menu a:hover {
+  .nav-collapse .nav > li > a:focus,
+  .nav-collapse .dropdown-menu a:hover,
+  .nav-collapse .dropdown-menu a:focus {
     background-color: #f2f2f2;
   }
   .navbar-inverse .nav-collapse .nav > li > a,
@@ -1011,22 +947,24 @@
     color: #999999;
   }
   .navbar-inverse .nav-collapse .nav > li > a:hover,
-  .navbar-inverse .nav-collapse .dropdown-menu a:hover {
+  .navbar-inverse .nav-collapse .nav > li > a:focus,
+  .navbar-inverse .nav-collapse .dropdown-menu a:hover,
+  .navbar-inverse .nav-collapse .dropdown-menu a:focus {
     background-color: #111111;
   }
   .nav-collapse.in .btn-group {
-    padding: 0;
     margin-top: 5px;
+    padding: 0;
   }
   .nav-collapse .dropdown-menu {
     position: static;
     top: auto;
     left: auto;
-    display: none;
     float: none;
+    display: none;
     max-width: none;
-    padding: 0;
     margin: 0 15px;
+    padding: 0;
     background-color: transparent;
     border: none;
     -webkit-border-radius: 0;
@@ -1057,9 +995,9 @@
     margin: 10px 0;
     border-top: 1px solid #f2f2f2;
     border-bottom: 1px solid #f2f2f2;
-    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
-       -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
-            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
+    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1);
   }
   .navbar-inverse .nav-collapse .navbar-form,
   .navbar-inverse .nav-collapse .navbar-search {
@@ -1072,18 +1010,17 @@
   }
   .nav-collapse,
   .nav-collapse.collapse {
-    height: 0;
     overflow: hidden;
+    height: 0;
   }
   .navbar .btn-navbar {
     display: block;
   }
   .navbar-static .navbar-inner {
-    padding-right: 10px;
     padding-left: 10px;
+    padding-right: 10px;
   }
 }
-
 @media (min-width: 980px) {
   .nav-collapse.collapse {
     height: auto !important;

docs/examples/fluid.html

@@ -86,7 +86,7 @@
           <div class="hero-unit">
             <h1>Hello, world!</h1>
             <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
-            <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
+            <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
           </div>
           <div class="row-fluid">
             <div class="span4">

docs/examples/hero.html

@@ -75,7 +75,7 @@
       <div class="hero-unit">
         <h1>Hello, world!</h1>
         <p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
-        <p><a class="btn btn-primary btn-large">Learn more &raquo;</a></p>
+        <p><a href="#" class="btn btn-primary btn-large">Learn more &raquo;</a></p>
       </div>
 
       <!-- Example row of columns -->

less/buttons.less

@@ -25,13 +25,14 @@
   .ie7-restore-left-whitespace(); // Give IE7 some love
   .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
 
-  // Hover state
+  // Hover/focus state
-  &:hover {
+  &:hover,
+  &:focus {
     color: @grayDark;
     text-decoration: none;
     background-position: 0 -15px;
 
-    // transition is only when going to hover, otherwise the background
+    // transition is only when going to hover/focus, otherwise the background
     // behind the gradient (there for IE<=9 fallback) gets mismatched
     .transition(background-position .1s linear);
   }
@@ -219,12 +220,14 @@ input[type="submit"].btn {
   color: @linkColor;
   .border-radius(0);
 }
-.btn-link:hover {
+.btn-link:hover,
+.btn-link:focus {
   color: @linkColorHover;
   text-decoration: underline;
   background-color: transparent;
 }
-.btn-link[disabled]:hover {
+.btn-link[disabled]:hover,
+.btn-link[disabled]:focus {
   color: @grayDark;
   text-decoration: none;
 }

less/carousel.less

@@ -97,8 +97,9 @@
     right: 15px;
   }
 
-  // Hover state
+  // Hover/focus state
-  &:hover {
+  &:hover,
+  &:focus {
     color: @white;
     text-decoration: none;
     .opacity(90);

less/close.less

@@ -11,7 +11,8 @@
   color: @black;
   text-shadow: 0 1px 0 rgba(255,255,255,1);
   .opacity(20);
-  &:hover {
+  &:hover,
+  &:focus {
     color: @black;
     text-decoration: none;
     cursor: pointer;

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
+// Nuke hover/focus effects
-.dropdown-menu > .disabled > a:hover {
+.dropdown-menu > .disabled > a:hover
+.dropdown-menu > .disabled > a:focus {
   text-decoration: none;
   background-color: transparent;
   background-image: none; // Remove CSS gradient

less/labels-badges.less

@@ -35,10 +35,12 @@
   }
 }
 
-// Hover state, but only for links
+// Hover/focus state, but only for links
 a {
   &.label:hover,
-  &.badge:hover {
+  &.label:focus,
+  &.badge:hover,
+  &.badge:focus {
     color: @white;
     text-decoration: none;
     cursor: pointer;

less/mixins.less

@@ -506,7 +506,7 @@
   .reset-filter();
 
   // in these cases the gradient won't cover the background, so we override
-  &:hover, &:active, &.active, &.disabled, &[disabled] {
+  &:hover, &:focus, &:active, &.active, &.disabled, &[disabled] {
     color: @textColor;
     background-color: @endColor;
     *background-color: darken(@endColor, 5%);

less/navbar.less

@@ -56,7 +56,8 @@
   font-weight: 200;
   color: @navbarBrandColor;
   text-shadow: 0 1px 0 @navbarBackgroundHighlight;
-  &:hover {
+  &:hover,
+  &:focus {
     text-decoration: none;
   }
 }
@@ -73,7 +74,8 @@
 // -------------------------
 .navbar-link {
   color: @navbarLinkColor;
-  &:hover {
+  &:hover,
+  &:focus {
     color: @navbarLinkColorHover;
   }
 }
@@ -247,10 +249,10 @@
   margin-top: 8px;
 }
 
-// Hover
+// Hover/focus
 .navbar .nav > li > a:focus,
 .navbar .nav > li > a:hover {
-  background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
+  background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active
   color: @navbarLinkColorHover;
   text-decoration: none;
 }
@@ -334,8 +336,9 @@
   }
 }
 
-// Caret should match text color on hover
+// Caret should match text color on hover/focus
-.navbar .nav li.dropdown > a:hover .caret {
+.navbar .nav li.dropdown > a:hover .caret,
+.navbar .nav li.dropdown > a:focus .caret {
   border-top-color: @navbarLinkColorActive;
   border-bottom-color: @navbarLinkColorActive;
 }
@@ -395,7 +398,8 @@
   .nav > li > a {
     color: @navbarInverseLinkColor;
     text-shadow: 0 -1px 0 rgba(0,0,0,.25);
-    &:hover {
+    &:hover,
+    &:focus {
       color: @navbarInverseLinkColorHover;
     }
   }
@@ -424,7 +428,8 @@
   // Inline text links
   .navbar-link {
     color: @navbarInverseLinkColor;
-    &:hover {
+    &:hover,
+    &:focus {
       color: @navbarInverseLinkColorHover;
     }
   }
@@ -442,7 +447,8 @@
     background-color: @navbarInverseLinkBackgroundActive;
     color: @navbarInverseLinkColorActive;
   }
-  .nav li.dropdown > a:hover .caret {
+  .nav li.dropdown > a:hover .caret,
+  .nav li.dropdown > a:focus .caret {
     border-top-color: @navbarInverseLinkColorActive;
     border-bottom-color: @navbarInverseLinkColorActive;
   }

less/navs.less

@@ -16,7 +16,8 @@
 .nav > li > a {
   display: block;
 }
-.nav > li > a:hover {
+.nav > li > a:hover,
+.nav > li > a:focus {
   text-decoration: none;
   background-color: @grayLighter;
 }
@@ -68,7 +69,8 @@
   padding: 3px 15px;
 }
 .nav-list > .active > a,
-.nav-list > .active > a:hover {
+.nav-list > .active > a:hover,
+.nav-list > .active > a:focus {
   color: @white;
   text-shadow: 0 -1px 0 rgba(0,0,0,.2);
   background-color: @linkColor;
@@ -122,13 +124,15 @@
   line-height: @baseLineHeight;
   border: 1px solid transparent;
   .border-radius(4px 4px 0 0);
-  &:hover {
+  &:hover,
+  &:focus {
     border-color: @grayLighter @grayLighter #ddd;
   }
 }
-// Active state, and it's :hover to override normal :hover
+// Active state, and it's :hover/:focus to override normal :hover/:focus
 .nav-tabs > .active > a,
-.nav-tabs > .active > a:hover {
+.nav-tabs > .active > a:hover,
+.nav-tabs > .active > a:focus {
   color: @gray;
   background-color: @bodyBackground;
   border: 1px solid #ddd;
@@ -151,7 +155,8 @@
 
 // Active state
 .nav-pills > .active > a,
-.nav-pills > .active > a:hover {
+.nav-pills > .active > a:hover,
+.nav-pills > .active > a:focus {
   color: @white;
   background-color: @linkColor;
 }
@@ -183,7 +188,8 @@
 .nav-tabs.nav-stacked > li:last-child > a {
   .border-bottom-radius(4px);
 }
-.nav-tabs.nav-stacked > li > a:hover {
+.nav-tabs.nav-stacked > li > a:hover,
+.nav-tabs.nav-stacked > li > a:focus {
   border-color: #ddd;
   z-index: 2;
 }
@@ -216,7 +222,8 @@
   border-bottom-color: @linkColor;
   margin-top: 6px;
 }
-.nav .dropdown-toggle:hover .caret {
+.nav .dropdown-toggle:hover .caret,
+.nav .dropdown-toggle:focus .caret {
   border-top-color: @linkColorHover;
   border-bottom-color: @linkColorHover;
 }
@@ -236,9 +243,10 @@
   border-bottom-color: @gray;
 }
 
-// Active:hover dropdown links
+// Active:hover/:focus dropdown links
 // -------------------------
-.nav > .dropdown.active > a:hover {
+.nav > .dropdown.active > a:hover,
+.nav > .dropdown.active > a:focus {
   cursor: pointer;
 }
 
@@ -246,21 +254,24 @@
 // -------------------------
 .nav-tabs .open .dropdown-toggle,
 .nav-pills .open .dropdown-toggle,
-.nav > li.dropdown.open.active > a:hover {
+.nav > li.dropdown.open.active > a:hover,
+.nav > li.dropdown.open.active > a:focus {
   color: @white;
   background-color: @grayLight;
   border-color: @grayLight;
 }
 .nav li.dropdown.open .caret,
 .nav li.dropdown.open.active .caret,
-.nav li.dropdown.open a:hover .caret {
+.nav li.dropdown.open a:hover .caret,
+.nav li.dropdown.open a:focus .caret {
   border-top-color: @white;
   border-bottom-color: @white;
   .opacity(100);
 }
 
 // Dropdowns in stacked tabs
-.tabs-stacked .open > a:hover {
+.tabs-stacked .open > a:hover,
+.tabs-stacked .open > a:focus {
   border-color: @grayLight;
 }
 
@@ -311,13 +322,15 @@
 }
 .tabs-below > .nav-tabs > li > a {
   .border-radius(0 0 4px 4px);
-  &:hover {
+  &:hover,
+  &:focus {
     border-bottom-color: transparent;
     border-top-color: #ddd;
   }
 }
 .tabs-below > .nav-tabs > .active > a,
-.tabs-below > .nav-tabs > .active > a:hover {
+.tabs-below > .nav-tabs > .active > a:hover,
+.tabs-below > .nav-tabs > .active > a:focus {
   border-color: transparent #ddd #ddd #ddd;
 }
 
@@ -346,11 +359,13 @@
   margin-right: -1px;
   .border-radius(4px 0 0 4px);
 }
-.tabs-left > .nav-tabs > li > a:hover {
+.tabs-left > .nav-tabs > li > a:hover,
+.tabs-left > .nav-tabs > li > a:focus {
   border-color: @grayLighter #ddd @grayLighter @grayLighter;
 }
 .tabs-left > .nav-tabs .active > a,
-.tabs-left > .nav-tabs .active > a:hover {
+.tabs-left > .nav-tabs .active > a:hover,
+.tabs-left > .nav-tabs .active > a:focus {
   border-color: #ddd transparent #ddd #ddd;
   *border-right-color: @white;
 }
@@ -365,11 +380,13 @@
   margin-left: -1px;
   .border-radius(0 4px 4px 0);
 }
-.tabs-right > .nav-tabs > li > a:hover {
+.tabs-right > .nav-tabs > li > a:hover,
+.tabs-right > .nav-tabs > li > a:focus {
   border-color: @grayLighter @grayLighter @grayLighter #ddd;
 }
 .tabs-right > .nav-tabs .active > a,
-.tabs-right > .nav-tabs .active > a:hover {
+.tabs-right > .nav-tabs .active > a:hover,
+.tabs-right > .nav-tabs .active > a:focus {
   border-color: #ddd #ddd #ddd transparent;
   *border-left-color: @white;
 }
@@ -383,8 +400,9 @@
 .nav > .disabled > a {
   color: @grayLight;
 }
-// Nuke hover effects
+// Nuke hover/focus effects
-.nav > .disabled > a:hover {
+.nav > .disabled > a:hover,
+.nav > .disabled > a:focus {
   text-decoration: none;
   background-color: transparent;
   cursor: default;

less/pager.less

@@ -20,7 +20,8 @@
   border: 1px solid #ddd;
   .border-radius(15px);
 }
-.pager li > a:hover {
+.pager li > a:hover,
+.pager li > a:focus {
   text-decoration: none;
   background-color: #f5f5f5;
 }
@@ -34,6 +35,7 @@
 }
 .pager .disabled > a,
 .pager .disabled > a:hover,
+.pager .disabled > a:focus,
 .pager .disabled > span {
   color: @grayLight;
   background-color: #fff;

less/pagination.less

@@ -32,6 +32,7 @@
   border-left-width: 0;
 }
 .pagination ul > li > a:hover,
+.pagination ul > li > a:focus,
 .pagination ul > .active > a,
 .pagination ul > .active > span {
   background-color: @paginationActiveBackground;
@@ -43,7 +44,8 @@
 }
 .pagination ul > .disabled > span,
 .pagination ul > .disabled > a,
-.pagination ul > .disabled > a:hover {
+.pagination ul > .disabled > a:hover,
+.pagination ul > .disabled > a:focus {
   color: @grayLight;
   background-color: transparent;
   cursor: default;

less/responsive-navbar.less

@@ -81,7 +81,9 @@
     margin-bottom: 2px;
   }
   .nav-collapse .nav > li > a:hover,
-  .nav-collapse .dropdown-menu a:hover {
+  .nav-collapse .nav > li > a:focus,
+  .nav-collapse .dropdown-menu a:hover,
+  .nav-collapse .dropdown-menu a:focus {
     background-color: @navbarBackground;
   }
   .navbar-inverse .nav-collapse .nav > li > a,
@@ -89,7 +91,9 @@
     color: @navbarInverseLinkColor;
   }
   .navbar-inverse .nav-collapse .nav > li > a:hover,
-  .navbar-inverse .nav-collapse .dropdown-menu a:hover {
+  .navbar-inverse .nav-collapse .nav > li > a:focus,
+  .navbar-inverse .nav-collapse .dropdown-menu a:hover,
+  .navbar-inverse .nav-collapse .dropdown-menu a:focus {
     background-color: @navbarInverseBackground;
   }
   // Buttons in the navbar

less/scaffolding.less

@@ -23,7 +23,8 @@ a {
   color: @linkColor;
   text-decoration: none;
 }
-a:hover {
+a:hover,
+a:focus {
   color: @linkColorHover;
   text-decoration: underline;
 }

less/sprites.less

@@ -28,7 +28,7 @@
   margin-top: 1px;
 }
 
-/* White icons with optional class, or on hover/active states of certain elements */
+/* White icons with optional class, or on hover/focus/active states of certain elements */
 .icon-white,
 .nav-pills > .active > a > [class^="icon-"],
 .nav-pills > .active > a > [class*=" icon-"],
@@ -37,11 +37,15 @@
 .navbar-inverse .nav > .active > a > [class^="icon-"],
 .navbar-inverse .nav > .active > a > [class*=" icon-"],
 .dropdown-menu > li > a:hover > [class^="icon-"],
+.dropdown-menu > li > a:focus > [class^="icon-"],
 .dropdown-menu > li > a:hover > [class*=" icon-"],
+.dropdown-menu > li > a:focus > [class*=" icon-"],
 .dropdown-menu > .active > a > [class^="icon-"],
 .dropdown-menu > .active > a > [class*=" icon-"],
 .dropdown-submenu:hover > a > [class^="icon-"],
-.dropdown-submenu:hover > a > [class*=" icon-"] {
+.dropdown-submenu:focus > a > [class^="icon-"],
+.dropdown-submenu:hover > a > [class*=" icon-"],
+.dropdown-submenu:focus > a > [class*=" icon-"] {
   background-image: url("@{iconWhiteSpritePath}");
 }
 

less/thumbnails.less

@@ -33,8 +33,9 @@
   .box-shadow(0 1px 3px rgba(0,0,0,.055));
   .transition(all .2s ease-in-out);
 }
-// Add a hover state for linked versions only
+// Add a hover/focus state for linked versions only
-a.thumbnail:hover {
+a.thumbnail:hover,
+a.thumbnail:focus {
   border-color: @linkColor;
   .box-shadow(0 1px 4px rgba(0,105,214,.25));
 }

less/type.less

@@ -29,19 +29,24 @@ cite    { font-style: normal; }
 
 // Utility classes
 .muted               { color: @grayLight; }
-a.muted:hover        { color: darken(@grayLight, 10%); }
+a.muted:hover,
+a.muted:focus        { color: darken(@grayLight, 10%); }
 
 .text-warning        { color: @warningText; }
-a.text-warning:hover { color: darken(@warningText, 10%); }
+a.text-warning:hover,
+a.text-warning:focus { color: darken(@warningText, 10%); }
 
 .text-error          { color: @errorText; }
-a.text-error:hover   { color: darken(@errorText, 10%); }
+a.text-error:hover,
+a.text-error:focus   { color: darken(@errorText, 10%); }
 
 .text-info           { color: @infoText; }
-a.text-info:hover    { color: darken(@infoText, 10%); }
+a.text-info:hover,
+a.text-info:focus    { color: darken(@infoText, 10%); }
 
 .text-success        { color: @successText; }
-a.text-success:hover { color: darken(@successText, 10%); }
+a.text-success:hover,
+a.text-success:focus { color: darken(@successText, 10%); }
 
 
 // Headings