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/navs.less
+39 -21
View File
@@ -16,7 +16,8 @@
.nav > li > a {
display: block;
}
.nav > li > a:hover {
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: @grayLighter;
}
@@ -68,7 +69,8 @@
padding: 3px 15px;
}
.nav-list > .active > a,
.nav-list > .active > a:hover {
.nav-list > .active > a:hover,
.nav-list > .active > a:focus {
color: @white;
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
background-color: @linkColor;
@@ -122,13 +124,15 @@
line-height: @baseLineHeight;
border: 1px solid transparent;
.border-radius(4px 4px 0 0);
&:hover {
&:hover,
&:focus {
border-color: @grayLighter @grayLighter #ddd;
}
}
// Active state, and it's :hover to override normal :hover
// Active state, and it's :hover/:focus to override normal :hover/:focus
.nav-tabs > .active > a,
.nav-tabs > .active > a:hover {
.nav-tabs > .active > a:hover,
.nav-tabs > .active > a:focus {
color: @gray;
background-color: @bodyBackground;
border: 1px solid #ddd;
@@ -151,7 +155,8 @@
// Active state
.nav-pills > .active > a,
.nav-pills > .active > a:hover {
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
color: @white;
background-color: @linkColor;
}
@@ -183,7 +188,8 @@
.nav-tabs.nav-stacked > li:last-child > a {
.border-bottom-radius(4px);
}
.nav-tabs.nav-stacked > li > a:hover {
.nav-tabs.nav-stacked > li > a:hover,
.nav-tabs.nav-stacked > li > a:focus {
border-color: #ddd;
z-index: 2;
}
@@ -216,7 +222,8 @@
border-bottom-color: @linkColor;
margin-top: 6px;
}
.nav .dropdown-toggle:hover .caret {
.nav .dropdown-toggle:hover .caret,
.nav .dropdown-toggle:focus .caret {
border-top-color: @linkColorHover;
border-bottom-color: @linkColorHover;
}
@@ -236,9 +243,10 @@
border-bottom-color: @gray;
}
// Active:hover dropdown links
// Active:hover/:focus dropdown links
// -------------------------
.nav > .dropdown.active > a:hover {
.nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
cursor: pointer;
}
@@ -246,21 +254,24 @@
// -------------------------
.nav-tabs .open .dropdown-toggle,
.nav-pills .open .dropdown-toggle,
.nav > li.dropdown.open.active > a:hover {
.nav > li.dropdown.open.active > a:hover,
.nav > li.dropdown.open.active > a:focus {
color: @white;
background-color: @grayLight;
border-color: @grayLight;
}
.nav li.dropdown.open .caret,
.nav li.dropdown.open.active .caret,
.nav li.dropdown.open a:hover .caret {
.nav li.dropdown.open a:hover .caret,
.nav li.dropdown.open a:focus .caret {
border-top-color: @white;
border-bottom-color: @white;
.opacity(100);
}
// Dropdowns in stacked tabs
.tabs-stacked .open > a:hover {
.tabs-stacked .open > a:hover,
.tabs-stacked .open > a:focus {
border-color: @grayLight;
}
@@ -311,13 +322,15 @@
}
.tabs-below > .nav-tabs > li > a {
.border-radius(0 0 4px 4px);
&:hover {
&:hover,
&:focus {
border-bottom-color: transparent;
border-top-color: #ddd;
}
}
.tabs-below > .nav-tabs > .active > a,
.tabs-below > .nav-tabs > .active > a:hover {
.tabs-below > .nav-tabs > .active > a:hover,
.tabs-below > .nav-tabs > .active > a:focus {
border-color: transparent #ddd #ddd #ddd;
}
@@ -346,11 +359,13 @@
margin-right: -1px;
.border-radius(4px 0 0 4px);
}
.tabs-left > .nav-tabs > li > a:hover {
.tabs-left > .nav-tabs > li > a:hover,
.tabs-left > .nav-tabs > li > a:focus {
border-color: @grayLighter #ddd @grayLighter @grayLighter;
}
.tabs-left > .nav-tabs .active > a,
.tabs-left > .nav-tabs .active > a:hover {
.tabs-left > .nav-tabs .active > a:hover,
.tabs-left > .nav-tabs .active > a:focus {
border-color: #ddd transparent #ddd #ddd;
*border-right-color: @white;
}
@@ -365,11 +380,13 @@
margin-left: -1px;
.border-radius(0 4px 4px 0);
}
.tabs-right > .nav-tabs > li > a:hover {
.tabs-right > .nav-tabs > li > a:hover,
.tabs-right > .nav-tabs > li > a:focus {
border-color: @grayLighter @grayLighter @grayLighter #ddd;
}
.tabs-right > .nav-tabs .active > a,
.tabs-right > .nav-tabs .active > a:hover {
.tabs-right > .nav-tabs .active > a:hover,
.tabs-right > .nav-tabs .active > a:focus {
border-color: #ddd #ddd #ddd transparent;
*border-left-color: @white;
}
@@ -383,8 +400,9 @@
.nav > .disabled > a {
color: @grayLight;
}
// Nuke hover effects
.nav > .disabled > a:hover {
// Nuke hover/focus effects
.nav > .disabled > a:hover,
.nav > .disabled > a:focus {
text-decoration: none;
background-color: transparent;
cursor: default;