2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-05 16:42:29 +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
+11 -7
View File
@@ -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
.dropdown-menu > .disabled > a:hover {
// Nuke hover/focus effects
.dropdown-menu > .disabled > a:hover
.dropdown-menu > .disabled > a:focus {
text-decoration: none;
background-color: transparent;
background-image: none; // Remove CSS gradient