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

1 files changed, 8 insertions, 5 deletions

diff --git a/less/buttons.less b/less/buttons.less
index 6f565b73c..fba635a5e 100644
--- a/less/buttons.less
+++ b/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 {
+  // Hover/focus state
+  &: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;
 }