Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added :focus state with all :hover states for keyboard accessibility.…

… Fixes #1117
  • Loading branch information...
commit 00fc47048d17dbb2129e80669d5aa08942e55dc1 1 parent d0e1e39
@zurbchris zurbchris authored
View
2  scss/foundation/common/_forms.scss
@@ -31,7 +31,7 @@
&.oversize { font-size: ms(1); padding: (($formSpacing - 4) / 2) ($formSpacing / 2); }
- &:focus { background: $inputFocusBgColor; outline: none !important; border-color: $inputFocusBorderColor; }
+ &:focus { background: $inputFocusBgColor; border-color: $inputFocusBorderColor; }
&[disabled] { background-color: #ddd; }
}
View
2  scss/foundation/common/_globals.scss
@@ -11,7 +11,7 @@
a img { border:none; }
a { color: $mainColor; text-decoration: none; line-height: inherit; }
a:hover { color: darken($mainColor, 5%); }
- a:focus { color: $mainColor; outline: none; }
+ a:focus { color: darken($mainColor, 5%); }
p a, p a:visited { line-height: inherit; }
/* Misc ---------------------- */
View
43 scss/foundation/components/modules/_buttons.scss
@@ -1,11 +1,10 @@
/* Normal Buttons ---------------------- */
- .button { width: auto; background: $mainColor; border: 1px solid darken(($mainColor), 15%); @include box-shadow(0 1px 0 $shinyEdge inset); color: $white; cursor: pointer; display: inline-block; font-family: inherit; font-size: ms(0); font-weight: bold; line-height: 1; margin: 0; outline: none; padding: $btnBase ($btnBase * 2) ($btnBase + 1); position: relative; text-align: center; text-decoration: none; @include single-transition(background-color, .15s, ease-in-out);
+ .button { width: auto; background: $mainColor; border: 1px solid darken(($mainColor), 15%); @include box-shadow(0 1px 0 $shinyEdge inset); color: $white; cursor: pointer; display: inline-block; font-family: inherit; font-size: ms(0); font-weight: bold; line-height: 1; margin: 0; padding: $btnBase ($btnBase * 2) ($btnBase + 1); position: relative; text-align: center; text-decoration: none; @include single-transition(background-color, .15s, ease-in-out);
/* Hovers */
- &:hover { color: $white; background-color: darken(($mainColor), 10%); }
+ &:hover, &:focus { color: $white; background-color: darken(($mainColor), 10%); }
&:active { @include box-shadow(0 1px 0 $darkEdge inset); }
- &:focus { @include box-shadow(0 0 4px opacify($mainColor, 0.3), 0 1px 0 $shinyEdge inset); color: $white; }
/* Sizes */
&.large { font-size: ms(1); padding: ($largeBtnBase) ($largeBtnBase * 2) ($largeBtnBase + 1); }
@@ -16,20 +15,16 @@
/* Colors */
&.primary { background-color: $mainColor; border: 1px solid darken(($mainColor), 15%);
- &:hover { background-color: darken(($mainColor), 10%); }
- &:focus { @include box-shadow(0 0 4px opacify($mainColor, 0.3), 0 1px 0 $shinyEdge inset); }
+ &:hover, &:focus { background-color: darken(($mainColor), 10%); }
}
&.success { background-color: $successColor; border: 1px solid darken(($successColor), 15%);
- &:hover { background-color: darken(($successColor), 10%); }
- &:focus { @include box-shadow(0 0 5px opacify($successColor, 0.4), 0 1px 0 $shinyEdge inset); }
+ &:hover, &:focus { background-color: darken(($successColor), 10%); }
}
&.alert { background-color: $alertColor; border: 1px solid darken(($alertColor), 15%);
- &:hover { background-color: darken(($alertColor), 10%); }
- &:focus { @include box-shadow(0 0 4px opacify($alertColor, 0.3), 0 1px 0 $shinyEdge inset); }
+ &:hover, &:focus { background-color: darken(($alertColor), 10%); }
}
&.secondary { background-color: $secondaryColor; color: darken(($secondaryColor), 80%); border: 1px solid darken(($secondaryColor), 15%);
- &:hover { background-color: darken(($secondaryColor), 10%); }
- &:focus { @include box-shadow(0 0 5px opacify($secondaryColor, 0.5), 0 1px 0 $shinyEdge inset); }
+ &:hover, &:focus { background-color: darken(($secondaryColor), 10%); }
}
/* Radii */
@@ -45,13 +40,13 @@
:hover { background: $mainColor; }
&.success { background-color: $successColor;
- &:hover { background-color: $successColor; }
+ &:hover, &:focus { background-color: $successColor; outline: none; }
}
&.alert { background-color: $alertColor;
- &:hover { background-color: $alertColor; }
+ &:hover, &:focus { background-color: $alertColor; outline: none; }
}
&.secondary { background-color: $secondaryColor;
- &:hover { background-color: $secondaryColor; }
+ &:hover, &:focus { background-color: $secondaryColor; outline: none; }
}
}
}
@@ -88,7 +83,7 @@
li { width: 100%; cursor: pointer; padding: 0; min-height: 18px; line-height: 18px; margin: 0; white-space: nowrap; list-style: none;
a { display: block; color: #555; font-size: ms(0) - 1; font-weight: $bodyFontWeight; padding: 6px 14px; text-align: $defaultFloat; }
- &:hover { background-color: lighten($mainColor, 45%); color: #222; }
+ &:hover, &:focus { background-color: lighten($mainColor, 45%); color: #222; }
&.divider { min-height: 0; padding: 0; height: 1px; margin: 4px 0; background: darken($white, 7%); }
}
}
@@ -106,14 +101,14 @@
&.split { padding: 0; position: relative;
&:after { display: none; }
- &:hover { background-color: $mainColor; }
- &.alert:hover { background-color: $alertColor; }
- &.success:hover { background-color: $successColor; }
- &.secondary:hover { background-color: $secondaryColor; }
+ &:hover, &:focus { background-color: $mainColor; }
+ &.alert:hover, &.alert:focus { background-color: $alertColor; }
+ &.success:hover, &.success:focus { background-color: $successColor; }
+ &.secondary:hover, &.secondary:focus { background-color: $secondaryColor; }
/* Sizes */
&>a { color: $white; display: block; padding: $btnBase (($btnBase * 2.5) * 2) ($btnBase + 1) ($btnBase * 2); padding-#{$defaultFloat}: $btnBase * 2; padding-#{$defaultOpposite}: ($btnBase * 2.5) * 2; @include single-transition(background-color, .15s, ease-in-out);
- &:hover { background-color: darken($mainColor, 10%); }
+ &:hover, &:focus { background-color: darken($mainColor, 10%); }
}
&.large>a { padding: $largeBtnBase (($largeBtnBase * 2.5) * 2) ($largeBtnBase + 1) ($largeBtnBase * 2); padding-#{$defaultFloat}: $largeBtnBase * 2; padding-#{$defaultOpposite}: ($largeBtnBase * 2.5) * 2; }
&.small>a { padding: $smallBtnBase (($smallBtnBase * 2.5) * 2) ($smallBtnBase + 1) ($smallBtnBase * 2); padding-#{$defaultFloat}: $smallBtnBase * 2; padding-#{$defaultOpposite}: ($smallBtnBase * 2.5) * 2; }
@@ -121,7 +116,7 @@
/* Triangle Spans */
&>span { background-color: $mainColor; position: absolute; #{$defaultOpposite}: 0; top: 0; height: 100%; width: $btnBase * 3; border-#{$defaultFloat}: 1px solid darken($mainColor, 15%); @include box-shadow(1px 1px 0 $shinyEdge inset); @include single-transition(background-color, .15s, ease-in-out);
- &:hover { background-color: darken($mainColor, 10%); }
+ &:hover, &:focus { background-color: darken($mainColor, 10%); }
&:after { @include cssTriangle(6px, #fff, top); position: absolute; top: 50%; #{$defaultFloat}: 50%; margin-#{$defaultFloat}: -6px; margin-top: -2px; }
}
&.secondary>span:after { @include cssTriangle(6px, darken(($secondaryColor), 80%), top); }
@@ -140,9 +135,9 @@
&.secondary>span { background-color: $secondaryColor; border-#{$defaultFloat}-color: darken($secondaryColor, 15%); }
&.secondary>a { color: darken(($secondaryColor), 80%); }
- &.alert>a:hover, &.alert>span:hover { background-color: darken($alertColor, 10%); }
- &.success>a:hover, &.success>span:hover { background-color: darken($successColor, 10%); }
- &.secondary>a:hover, &.secondary>span:hover { background-color: darken($secondaryColor, 10%); }
+ &.alert>a:hover, &.alert>span:hover, &.alert>a:focus, &.alert>span:focus { background-color: darken($alertColor, 10%); }
+ &.success>a:hover, &.success>span:hover, &.success>a:focus, &.success>span:focus { background-color: darken($successColor, 10%); }
+ &.secondary>a:hover, &.secondary>span:hover, &.secondary>a:focus, &.secondary>span:focus { background-color: darken($secondaryColor, 10%); }
}
}
View
4 scss/foundation/components/modules/_clearing.scss
@@ -13,7 +13,7 @@
}
.clearing-close { z-index: 999; position: absolute; top: 10px; right: 20px; font-size: 30px; line-height: 1; color: $clearingCloseColor; display: none;
- &:hover { color: #ccc; }
+ &:hover, &:focus { color: #ccc; }
}
.clearing-main-left, .clearing-main-right { position: absolute; top: 50%; margin-top: -16px; }
.clearing-main-left.disabled, .clearing-main-right.disabled { opacity: 0.5; }
@@ -54,7 +54,7 @@ ul.block-grid[data-clearing] { overflow: visible; }
}
}
.th img { border: none; @include box-shadow(0 0 0 0 rgba(#000,0)); @include border-radius(0); }
- &:hover {
+ &:hover, &:focus {
img { @include box-shadow(0 0 0 0 rgba(0,0,0,0)); }
}
}
View
2  scss/foundation/components/modules/_joyride.scss
@@ -27,7 +27,7 @@
.joyride-timer-indicator { display: block; width: 0; height: inherit; background: $tipTimerColor; }
.joyride-close-tip { position: absolute; right: 10px; top: 10px; color: $tipCloseColor !important; text-decoration: none; font-size: $tipCloseSize; font-weight: $tipCloseWeight; line-height: .5 !important;
- &:hover { color: #eee !important; }
+ &:hover, &:focus { color: #eee !important; }
}
.joyride-modal-bg { position: fixed; height: 100%; width: 100%; background: transparent; background: $tipScreenFill; z-index: 100; display: none; top: 0; left: 0; cursor: pointer; }
View
2  scss/foundation/components/modules/_navbar.scss
@@ -64,7 +64,7 @@
li { border-#{$defaultFloat}: solid 3px #CCC;
a { background: darken($white, 5%); border: 1px solid darken($white, 10%); border-width: 1px 1px 0 0; color: #555; display: block; font-size: ms(0); height: auto; line-height: 1; padding: (($navBarHeight / 2) - 5) ($navBarHeight / 2); @include box-shadow(0 1px 0 $shinyEdge inset);
- &:hover { background: darken($white, 8%); color: #333; }
+ &:hover, &:focus { background: darken($white, 8%); color: #333; }
}
&.active { margin-top: 0; border-top: 1px solid lighten($black, 30%); border-#{$defaultFloat}: 4px solid lighten($black, 10%);
a { background: lighten($black, 30%); border: none; color: #fff; height: auto; margin: 0; position: static; top: 0; @include box-shadow(0 0 0); }
View
2  scss/foundation/components/modules/_orbit.scss
@@ -32,7 +32,7 @@
span.pause { display: block; width: 40px; height: 40px; position: absolute; top: 0; #{$defaultFloat}: 0; background: image-url("foundation/orbit/pause-black.png") no-repeat; z-index: 4; opacity: 0;
&.active { background: image-url("foundation/orbit/pause-black.png") no-repeat 0 -40px; }
}
- div.timer:hover span.pause, span.pause.active { opacity: 1 }
+ div.timer:hover span.pause, div.timer:focus span.pause, span.pause.active { opacity: 1 }
}
/* Captions ---------------------- */
View
14 scss/foundation/components/modules/_topbar.scss
@@ -45,7 +45,7 @@
&>li { float: left;
a:not(.button) { color: $topBarLinkColor; display: block; font-size: $topBarLinkSize; font-weight: $topBarLinkWeight; height: $topBarHeight; line-height: $topBarHeight; padding: 0 $topBarHeight / 3; }
&:not(.name) {
- &:hover, &.active { background: darken($topBarBgColor, 15%);
+ &:hover, &.active, &:focus { background: darken($topBarBgColor, 15%);
a { color: darken($topBarLinkColor, 15%); }
}
}
@@ -56,7 +56,7 @@
/* Put a button in an <li> but give is a class */
&.has-button {
a.button { margin: 0 $topBarHeight / 4; }
- &:hover { background: $topBarBgColor;
+ &:hover, &:focus { background: $topBarBgColor;
a { color: #fff; }
}
}
@@ -69,7 +69,7 @@
}
input[type=search] { font-size: 16px; margin-bottom: 0; }
}
- &:hover { background: $topBarBgColor; }
+ &:hover, &:focus { background: $topBarBgColor; }
}
/* Hide the triangle for breakpoint menu */
@@ -77,7 +77,7 @@
/* li.has-dropdown */
&.has-dropdown { position: relative;
- &:hover { &>.dropdown { display: block; visibility: visible; } }
+ &:hover, &:focus { &>.dropdown { display: block; visibility: visible; } }
a { padding-right: $topBarHeight * .75;
&:after { @include cssTriangle($topBarDropToggleSize, $topBarDropToggleColor, top); margin-right: $topBarHeight / 3; margin-top: -$topBarDropToggleSize / 2; position: absolute; right: 0; top: 50%; }
}
@@ -85,7 +85,7 @@
li { background: $topBarDropBgColor; line-height: 1; min-width: 100%; padding-bottom: 5px;
a { color: $topBarDropLinkColor; font-weight: normal; height: 100%; line-height: 1; padding: 5px $topBarHeight / 3 + 2 5px $topBarHeight / 3; white-space: nowrap;
&:after { border: none; }
- &:hover { background: lighten($topBarDropBgColor, 10%); }
+ &:hover, &:focus { background: lighten($topBarDropBgColor, 10%); }
}
label { color: lighten($topBarDropBgColor, 30%); font-size: ms(0) - 4; font-weight: $topBarLinkWeight; margin: 0; padding-left: $topBarHeight / 3; text-transform: uppercase; }
&.divider { border-top: solid 1px darken($topBarDropBgColor, 20%); @include box-shadow(0 1px 0 rgba(255,255,255,.10) inset); height: 10px; padding: 0; width: 100%; }
@@ -100,7 +100,7 @@
&:after { border: none; content:"\00bb"; right: 5px; top: 6px; }
}
.dropdown { position: absolute; left: 100%; top: 0; }
- &:hover {
+ &:hover, &:focus {
&>.dropdown { display: block; }
}
}
@@ -131,7 +131,7 @@
/* IE8 Fixes */
.lt-ie9 .top-bar ul li a { color: $topBarLinkColor; display: block; font-weight: $topBarLinkWeight; font-size: $topBarLinkSize; height: $topBarHeight; line-height: $topBarHeight; padding: 0 $topBarHeight / 3;
&.button { height: auto; line-height: 30px; margin-top: 7px; }
- &:hover { color: darken($topBarLinkColor, 20%); }
+ &:hover, &:focus { color: darken($topBarLinkColor, 20%); }
img { margin-top: -5px; vertical-align: middle; }
&.active { background: darken($topBarBgColor, 5%); color: darken($topBarLinkColor, 15%); }
}
View
8 scss/foundation/components/modules/_ui.scss
@@ -53,7 +53,7 @@
.has-tip { border-bottom: $hasTipBorderBottom; cursor: help; font-weight: $hasTipFontWeight; color: $hasTipFontColor;
- &:hover { border-bottom: $hasTipBorderBottomHover; color: $hasTipFontColorHover; }
+ &:hover, &:focus { border-bottom: $hasTipBorderBottomHover; color: $hasTipFontColorHover; }
&.tip-left, &.tip-right { float: none !important; }
}
@@ -87,7 +87,7 @@
a { color: #fff; }
.button { background: $white; border: none; color: $mainColor; @include text-shadow(none);
- &:hover { background: rgba(255,255,255,0.8); }
+ &:hover, &:focus { background: rgba(255,255,255,0.8); }
}
}
@@ -156,7 +156,7 @@
&.unavailable a { cursor: default; color: #999; }
&.unavailable:hover a, &.unavailable a:focus { background: transparent; }
&.current a { background: $mainColor; color: $white; font-weight: bold; cursor: default;
- &:hover { background: $mainColor; }
+ &:hover, &:focus { background: $mainColor; }
}
}
@@ -200,7 +200,7 @@
/* Image Thumbnails ---------------------- */
.th { display: block;
img { display: block; border: solid 4px #fff; @include box-shadow(0 0 0 1px rgba(#000,.2)); @include border-radius($thumbRadius); @include transition-property(box-shadow); @include transition-duration(300ms); }
- &:hover {
+ &:hover, &:focus {
img { @include box-shadow(0 0 6px 1px rgba($mainColor,.5)); }
}
}
Please sign in to comment.
Something went wrong with that request. Please try again.