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:
+8
-5
@@ -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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user