diff options
| author | Patrick H. Lauke <[email protected]> | 2013-01-02 22:39:21 +0000 |
|---|---|---|
| committer | Patrick H. Lauke <[email protected]> | 2013-01-02 22:39:21 +0000 |
| commit | 848ca6e31562fc65da891cce9046853bd16564eb (patch) | |
| tree | 3fb4c8c6be86061b9ef0c5d62c39d14f39427791 /less/dropdowns.less | |
| parent | 1c0e4fc7bb6ab2ef12f1050ed177a02d16ebdbce (diff) | |
| download | bootstrap-848ca6e31562fc65da891cce9046853bd16564eb.tar.xz bootstrap-848ca6e31562fc65da891cce9046853bd16564eb.zip | |
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).
Diffstat (limited to 'less/dropdowns.less')
| -rw-r--r-- | less/dropdowns.less | 18 |
1 files changed, 11 insertions, 7 deletions
diff --git a/less/dropdowns.less b/less/dropdowns.less index a0d4b1fd0..13490a637 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -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 |