Andal.LND/edx-platform
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #2946 from edx/dcs/a11y-focus-hover

Browse Source 
Fixes LMS-2352 by unifying :hover and :focus styles.
This commit is contained in:
Dave St.Germain
2014-03-19 14:39:54 -04:00
parent e4dff8e118 dbd4e73b04
commit da79ae2b4d
23 changed files with 54 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
common/lib/xmodule/xmodule/css/combinedopenended/display.scss
View File

@@ -250,7 +250,7 @@ section.combined-open-ended-status {
margin-bottom: 2px;
padding: $baseline/2;
&:hover {
&:hover, &:focus {
background-color: #eee;
}
.rubric-label-selected{
@@ -477,7 +477,7 @@ div.rubric {
padding: $baseline/2;
border-radius: $baseline/4;
&:hover {
&:hover, &:focus {
background-color: #eee;
}

2
common/lib/xmodule/xmodule/css/combinedopenended/edit.scss
View File

@@ -17,7 +17,7 @@
pointer-events: none;
cursor: none;
&:hover {
&:hover, &:focus {
box-shadow: 0 0 0 0 !important;
}
}

2
common/lib/xmodule/xmodule/css/editor/edit.scss
View File

@@ -20,7 +20,7 @@
margin-left: 7px;
border-radius: 2px;
&:hover {
&:hover, &:focus {
background: rgba(255, 255, 255, .5);
}
}

2
common/lib/xmodule/xmodule/css/html/display.scss
View File

@@ -90,7 +90,7 @@ ul {
}
a {
&:link, &:visited, &:hover, &:active {
&:link, &:visited, &:hover, &:active, &:focus {
color: #1d9dd9;
}
}

2
common/lib/xmodule/xmodule/css/problem/edit.scss
View File

@@ -17,7 +17,7 @@
pointer-events: none;
cursor: none;
&:hover {
&:hover, &:focus {
box-shadow: 0 0 0 0 !important;
}
}

10
common/lib/xmodule/xmodule/css/sequence/display.scss
View File

@@ -5,7 +5,7 @@ $border-color: #C8C8C8;
border-left: 1px solid lighten($border-color, 10%);
display: block;
&:hover {
&:hover, &:focus {
background: none;
}
}
@@ -23,7 +23,7 @@ $border-color: #C8C8C8;
border-left: 1px solid lighten($border-color, 10%);
display: block;
&:hover {
&:hover, &:focus {
background: none;
}
}
@@ -131,7 +131,7 @@ nav.sequence-nav {
// color: #aaa;
// }
&:hover {
&:hover, &:focus {
background-color: #fff;
background-repeat: no-repeat;
background-position: center 14px;
@@ -282,7 +282,7 @@ nav.sequence-nav {
outline: 0;
}
*/
&:hover {
&:hover, &:focus {
opacity: 0.5;
}
@@ -353,7 +353,7 @@ nav.sequence-bottom {
text-indent: -9999px;
@include transition(all .2s $ease-in-out-quad 0s);
&:hover {
&:hover, &:focus {
opacity: 0.5;
background-position: center 15px;
}

2
common/lib/xmodule/xmodule/css/tabs/tabs.scss
View File

@@ -79,7 +79,7 @@
cursor: default;
}
&:hover {
&:hover, &:focus {
box-shadow: inset 0 1px 2px 1px $shadow;
background-image: linear-gradient(#009FE6, #009FE6) !important;
}

2
common/lib/xmodule/xmodule/css/video/accessible_menu.scss
View File

@@ -48,7 +48,7 @@ $blue-s1: saturate($blue,15%);
font-size: 14px;
line-height: 23px;
&:hover {
&:hover, &:focus {
color: $gray-d1;
}
}

10
common/lib/xmodule/xmodule/css/video/display.scss
View File

@@ -58,7 +58,7 @@ div.video {
padding: ($baseline*.75);
color: $lighter-base-font-color;
&:hover {
&:hover, &:focus {
background-color: $action-primary-active-bg;
color: $very-light-text;
}
@@ -166,7 +166,7 @@ div.video {
color: #ccc;
position: relative;
&:hover {
&:hover, &:focus {
ul, div {
opacity: 1;
}
@@ -188,7 +188,7 @@ div.video {
border-style: solid;
border-color: #000;
&:hover {
&:hover, &:focus {
background-color: #444;
color: #fff;
text-decoration: none;
@@ -370,7 +370,7 @@ div.video {
text-overflow: ellipsis;
white-space: nowrap;
&:hover {
&:hover, &:focus {
background-color: #666;
color: #aaa;
outline-offset: -4px;
@@ -617,7 +617,7 @@ div.video {
outline-offset: -1px;
}
&:hover {
&:hover, &:focus {
text-decoration: underline;
}

22
common/static/sass/_mixins-inherited.scss
View File

@@ -133,12 +133,12 @@
color: $gray-d1 !important;
pointer-events: none;
cursor: none;
&:hover {
&:hover, &:focus {
box-shadow: 0 0 0 0 !important;
}
}
&:hover, &.active {
&:hover, &:focus, &:active {
box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15);
}
}
@@ -152,7 +152,7 @@
background-color: $green;
color: $white;
&:hover {
&:hover, &:focus {
background-color: $green-s1;
color: $white;
}
@@ -173,7 +173,7 @@
background-color: $blue;
color: $white;
&:hover, &.active {
&:hover, &:focus, &:active {
background-color: $blue-s2;
color: $white;
}
@@ -194,7 +194,7 @@
background-color: $red;
color: $white;
&:hover, &.active {
&:hover, &:focus, &:active {
background-color: $red-s1;
color: $white;
}
@@ -215,7 +215,7 @@
background-color: $pink;
color: $white;
&:hover, &.active {
&:hover, &:focus, &:active {
background-color: $pink-s1;
color: $white;
}
@@ -237,7 +237,7 @@
background-color: $orange;
color: $gray-d2;
&:hover {
&:hover, &:focus {
background-color: $orange-s2;
color: $gray-d2;
}
@@ -260,7 +260,7 @@
color: rgb(92, 103, 122);
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
&:hover {
&:hover, &:focus {
background-color: rgb(222, 236, 247);
color: rgb(92, 103, 122);
}
@@ -290,7 +290,7 @@
background-color: $gray-d2;
color: $gray-l3;
&:hover {
&:hover, &:focus {
background-color: $gray-d3;
color: $white;
}
@@ -304,7 +304,7 @@
box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset;
color: $white;
&:hover {
&:hover, &:focus {
background-color: $gray-d4;
color: $white;
}
@@ -373,7 +373,7 @@
background: #edf1f5;
font-size: 13px;
&:hover {
&:hover, &:focus {
background: $blue-l5;
.item-actions {

10
common/static/sass/_mixins.scss
View File

@@ -180,14 +180,14 @@
line-height: 1.5em;
text-align: center;
&:hover, &:active {
&:hover, &:active, &:focus {
box-shadow: 0 2px 1px $shadow-l1;
}
&.current, &.active {
box-shadow: inset 1px 1px 2px $shadow-d1;
&:hover, &:active {
&:hover, &:active, &:focus {
box-shadow: inset 1px 1px 1px $shadow-d1;
}
}
@@ -204,7 +204,7 @@
line-height: 1.5em;
text-align: center;
&:hover, &:active {
&:hover, &:active, &:focus {
}
@@ -224,7 +224,7 @@
background-color: $white;
color: $blue-l2;
&:hover {
&:hover, &:focus {
border: 1px solid $blue;
background-color: $blue;
color: $white;
@@ -249,7 +249,7 @@
vertical-align: middle;
color: $gray-l1;
&:hover {
&:hover, &:focus {
background-color: $gray-l1;
color: $white;
}

2
common/static/sass/bourbon/addons/_button.scss vendored
View File

@@ -76,7 +76,7 @@
text-shadow: 0 1px 0 $text-shadow;
background-clip: padding-box;
&:hover:not(:disabled) {
&:hover:not(:disabled),&:focus:not(:disabled) {
$base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
$inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
$stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);

2
lms/static/sass/course/courseware/_sidebar.scss
View File

@@ -34,7 +34,7 @@
color: #666;
}
&.ui-state-hover {
&.ui-state-hover, &.ui-state-focus {
a {
color: #666;
}

2
lms/static/sass/course/instructor/_instructor_2.scss
View File

@@ -473,7 +473,7 @@ section.instructor-dashboard-content-2 {
color: $lighter-base-font-color;
cursor: pointer;
&:hover {
&:hover, &:focus {
color: $alert-color;
}
}

2
lms/static/sass/course/layout/_calculator.scss
View File

@@ -65,7 +65,7 @@ div.calc-main {
-webkit-appearance: none;
width: flex-grid(.5) + flex-gutter();
&:hover {
&:hover, &:focus {
color: #333;
}
}

2
lms/static/sass/course/layout/_courseware_header.scss
View File

@@ -108,7 +108,7 @@ header.global.slim {
text-shadow: 0 -1px rgba(0, 0, 0, 0.6);
vertical-align: middle;
&:hover, &.active {
&:hover, &:active, &:focus {
@include background-image(linear-gradient(-90deg, $link-color, $link-color 50%, $link-color 50%, $link-color 100%));
}
}

6
lms/static/sass/elements/_controls.scss
View File

@@ -38,7 +38,7 @@
box-shadow: 0 1px 0 rgba($white, .3) inset, 0 0 0 rgba($black, 0);
padding: ($baseline/2) $baseline;
&:hover, &.active {
&:hover, &:active, &:focus {
text-decoration: none;
}
@@ -54,7 +54,7 @@
background-color: $action-primary-bg;
color: $action-primary-fg;
&:hover, &.active {
&:hover, &:active, &:focus {
background-color: $action-primary-focused-bg;
color: $action-primary-focused-fg;
}
@@ -129,7 +129,7 @@
background: shade($error-color, 25%);
color: $white;
&:hover, &:active {
&:hover, &:active, &:focus {
background: $error-color;
color: $white;
}

2
lms/static/sass/elements/_system-feedback.scss
View File

@@ -90,7 +90,7 @@
text-shadow: none;
color: inherit;
&:hover {
&:hover, &:focus {
color: $action-primary-bg;
}
}

2
lms/static/sass/multicourse/_about_pages.scss
View File

@@ -24,7 +24,7 @@
@include transition(all 0.15s linear 0s);
text-transform: lowercase;
&:hover, &.active, &:focus {
&:hover, &:active, &:focus {
border-color: rgb(200,200,200);
color: $base-font-color;
text-decoration: none;

12
lms/static/sass/multicourse/_course_about.scss
View File

@@ -67,7 +67,7 @@
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-transform: none;
&:hover {
&:hover, &:focus {
color: $link-color;
}
}
@@ -84,7 +84,7 @@
text-shadow: 0 1px rgba(255,255,255, 0.6);
text-transform: none;
&:hover {
&:hover, &:focus {
color: $link-color;
}
}
@@ -110,13 +110,13 @@
text-align: center;
width: flex-grid(6);
&:hover {
&:hover, &:focus {
color: rgb(255,255,255);
}
}
a {
&:hover, &:visited {
&:hover, &:visited, &:focus {
text-decoration: none;
}
}
@@ -134,7 +134,7 @@
text-align: center;
width: flex-grid(3, 8);
&:hover {
&:hover, &:focus {
color: rgb(255,255,255);
}
}
@@ -261,7 +261,7 @@
margin-left: 0px;
}
&:hover, &.active, &:focus {
&:hover, &:active, &:focus {
border-color: $border-color-2;
color: $base-font-color;
text-decoration: none;

4
lms/static/sass/shared/_course_object.scss
View File

@@ -71,7 +71,7 @@
display: block;
}
a:hover {
a:hover, a:focus {
text-decoration: none;
}
@@ -116,7 +116,7 @@
display: block;
height: 50px;
&:hover {
&:hover, &:focus {
@include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8)));
text-decoration: none;

2
lms/static/sass/shared/_header.scss
View File

@@ -98,7 +98,7 @@ header.global {
margin-right: 0px;
}
&:hover, &:focus, &.active {
&:hover, &:focus, &:active {
background: $button-bg-hover-color;
}
}

2
lms/static/sass/views/_verification.scss
View File

@@ -33,7 +33,7 @@
@extend %ui-fake-link;
color: $m-blue-d2;
&:hover {
&:hover, &:focus {
color: $m-blue;
}
}