2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-11 18:02:28 +03:00

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).
This commit is contained in:
Patrick H. Lauke
2013-01-02 22:39:21 +00:00
parent 1c0e4fc7bb
commit 848ca6e315
19 changed files with 886 additions and 1763 deletions
+8 -5
View File
@@ -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;
}