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

Basic keyboard accessibility CSS tweaks

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
less/navbar.less
+15 -9
View File
@@ -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
.navbar .nav li.dropdown > a:hover .caret {
// Caret should match text color on hover/focus
.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;
}