From 5a46177a5ead1d804a19a7ee0d95f74dd327ea00 Mon Sep 17 00:00:00 2001 From: Giulio Gratta Date: Tue, 22 Oct 2013 10:55:16 -0700 Subject: [PATCH] A11Y changes: better :focus styling, increased contrast, and added image alt texts - Doubled up :hover and :focus styling to improve a11y - Increase contrast of certain UI elements for improved a11y - Added some image alt text for a11y - Changed video caption styling to blue and made them underline on hover and added a skip link before video for screenreaders. Fixes Bugs: - LMS-1336 --- .../xmodule/xmodule/css/video/display.scss | 4 +- .../xmodule/templates/about/overview.yaml | 4 +- lms/static/sass/_discussion.scss | 8 +- lms/static/sass/_shame.scss | 16 ++-- lms/static/sass/base/_base.scss | 8 +- lms/static/sass/base/_reset.scss | 2 +- .../sass/course/_discussions-inline.scss | 2 +- lms/static/sass/course/_gradebook.scss | 2 + lms/static/sass/course/_info.scss | 8 +- .../sass/course/_open_ended_grading.scss | 3 +- lms/static/sass/course/_profile.scss | 4 +- lms/static/sass/course/_textbook.scss | 6 +- lms/static/sass/course/base/_base.scss | 2 +- lms/static/sass/course/base/_extends.scss | 8 +- lms/static/sass/course/base/_mixins.scss | 6 +- .../sass/course/courseware/_amplifier.scss | 4 +- .../sass/course/courseware/_sidebar.scss | 10 ++- .../sass/course/instructor/_instructor_2.scss | 4 +- .../sass/course/layout/_calculator.scss | 2 +- lms/static/sass/course/layout/_chat.scss | 3 +- .../course/layout/_courseware_header.scss | 2 +- .../course/layout/_courseware_subnav.scss | 2 +- lms/static/sass/course/wiki/_create.scss | 2 +- lms/static/sass/course/wiki/_wiki.scss | 18 ++--- lms/static/sass/elements/_controls.scss | 24 +++--- lms/static/sass/elements/_typography.scss | 2 +- lms/static/sass/ie.scss | 9 ++- lms/static/sass/multicourse/_about_pages.scss | 4 +- lms/static/sass/multicourse/_account.scss | 4 +- .../sass/multicourse/_course_about.scss | 14 ++-- lms/static/sass/multicourse/_dashboard.scss | 18 ++--- lms/static/sass/multicourse/_edge.scss | 10 +-- lms/static/sass/multicourse/_help.scss | 2 +- lms/static/sass/multicourse/_home.scss | 18 ++--- lms/static/sass/multicourse/_jobs.scss | 2 +- lms/static/sass/multicourse/_media-kit.scss | 4 +- .../multicourse/_testcenter-register.scss | 8 +- lms/static/sass/shared/_course_filter.scss | 2 +- lms/static/sass/shared/_course_object.scss | 4 +- lms/static/sass/shared/_footer.scss | 8 +- lms/static/sass/shared/_header.scss | 10 +-- lms/static/sass/shared/_modal.scss | 10 +-- lms/static/sass/views/_verification.scss | 2 +- lms/templates/courseware/course_about.html | 15 ++-- lms/templates/video.html | 74 ++++++++++--------- 45 files changed, 192 insertions(+), 182 deletions(-) diff --git a/common/lib/xmodule/xmodule/css/video/display.scss b/common/lib/xmodule/xmodule/css/video/display.scss index fe73fb12ae..7b3d12b2ba 100644 --- a/common/lib/xmodule/xmodule/css/video/display.scss +++ b/common/lib/xmodule/xmodule/css/video/display.scss @@ -595,7 +595,7 @@ div.video { li { border: 0; - color: #666; + color: rgb(29,157,217); cursor: pointer; margin-bottom: 8px; padding: 0; @@ -613,7 +613,7 @@ div.video { } &:hover { - color: $blue; + text-decoration: underline; } &:empty { diff --git a/common/lib/xmodule/xmodule/templates/about/overview.yaml b/common/lib/xmodule/xmodule/templates/about/overview.yaml index 9b2e895526..a41fd50d76 100644 --- a/common/lib/xmodule/xmodule/templates/about/overview.yaml +++ b/common/lib/xmodule/xmodule/templates/about/overview.yaml @@ -19,7 +19,7 @@ data: |

Course Staff

- + Course Staff Image #1

Staff Member #1

@@ -28,7 +28,7 @@ data: |
- + Course Staff Image #2

Staff Member #2

diff --git a/lms/static/sass/_discussion.scss b/lms/static/sass/_discussion.scss index d526b5b94e..8f55f6c5fd 100644 --- a/lms/static/sass/_discussion.scss +++ b/lms/static/sass/_discussion.scss @@ -2619,7 +2619,7 @@ body.discussion { width: 10px; height: 14px; padding-right: 3px; - color: #666; + color: #333; } .pinned .icon { @@ -2640,7 +2640,7 @@ body.discussion { } .notpinned span { - color: #666; + color: #333; font-style: italic; } @@ -2665,7 +2665,7 @@ display:none; .notflagged .icon { display: block; - color: #666; + color: #333; float: left; margin: 3px; width: 10px; @@ -2690,6 +2690,6 @@ display:none; } .notflagged span { - color: #666; + color: #333; font-style: italic; } diff --git a/lms/static/sass/_shame.scss b/lms/static/sass/_shame.scss index 64beba6723..af98520bd2 100644 --- a/lms/static/sass/_shame.scss +++ b/lms/static/sass/_shame.scss @@ -48,7 +48,7 @@ &.disabled, &[disabled], &.is-disabled { background: $action-primary-disabled-bg; - &:hover { + &:hover, &:focus { background: $action-primary-disabled-bg !important; // needed for IE currently } } @@ -61,7 +61,7 @@ background: $action-primary-bg; color: $action-primary-fg; - &:hover, &:active { + &:hover, &:active, &:focus { background: $action-primary-focused-bg; } @@ -70,7 +70,7 @@ background: $action-primary-active-bg; color: $action-primary-active-fg; - &:hover, &:active { + &:hover, &:active, &:focus { box-shadow: inset 0 2px 1px 1px $action-primary-active-focused-shadow; color: $action-primary-active-focused-fg; } @@ -89,7 +89,7 @@ background: $action-secondary-bg; color: $action-secondary-fg; - &:hover, &:active { + &:hover, &:active, &:focus { background: $action-secondary-focused-bg; } @@ -98,7 +98,7 @@ background: $action-secondary-active-bg; color: $action-secondary-active-fg; - &:hover, &:active { + &:hover, &:active, &:focus { box-shadow: inset 0 2px 1px 1px $action-secondary-active-focused-shadow; color: $action-secondary-active-focused-fg; } @@ -172,7 +172,7 @@ opacity: 0.6; } - &:hover .track { + &:hover .track, &:focus .track { opacity: 1.0; } @@ -205,13 +205,13 @@ header.global { - .logo a:hover, .logo:active { + .logo a:hover, .logo:active, .logo a:focus { border: none; text-decoration: none; padding-bottom: 0; } - .nav-global a:hover, .nav-global a:active { + .nav-global a:hover, .nav-global a:active, .nav-global a:focus { border: none; } } diff --git a/lms/static/sass/base/_base.scss b/lms/static/sass/base/_base.scss index 66b5e00405..6c32fb39b5 100644 --- a/lms/static/sass/base/_base.scss +++ b/lms/static/sass/base/_base.scss @@ -66,7 +66,7 @@ p { text-decoration: none; @include transition(all 0.1s linear 0s); - &:hover { + &:hover, &:focus { color: $link-color; text-decoration: underline; } @@ -79,7 +79,7 @@ a:link, a:visited { text-decoration: none; @include transition(all 0.1s linear 0s); - &:hover { + &:hover, &:focus { text-decoration: underline; } @@ -246,7 +246,7 @@ mark { padding: 6px 22px 11px; display: inline-block; - &:hover { + &:hover, &:focus { color: #fff; background: #1D9DD9; } @@ -275,7 +275,7 @@ mark { border-radius: 0px 0px 10px 10px; } - &:hover { + &:hover, &:focus { color: #fff; background: #1D9DD9; } diff --git a/lms/static/sass/base/_reset.scss b/lms/static/sass/base/_reset.scss index 879f805689..eac3ed9512 100644 --- a/lms/static/sass/base/_reset.scss +++ b/lms/static/sass/base/_reset.scss @@ -11,7 +11,7 @@ body { margin: 0; font-size: 1em; line-height: 1.4; } a { color: #00e; } a:visited { color: #551a8b; } -a:hover { color: #06e; } +a:hover, a:focus { color: #06e; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } abbr[title] { border-bottom: 1px dotted; } diff --git a/lms/static/sass/course/_discussions-inline.scss b/lms/static/sass/course/_discussions-inline.scss index bd4142c2d2..fc9e73990b 100644 --- a/lms/static/sass/course/_discussions-inline.scss +++ b/lms/static/sass/course/_discussions-inline.scss @@ -275,7 +275,7 @@ padding-bottom: 2px; border-color: #333; - &:hover { + &:hover, &:focus { border-color: #222; } } diff --git a/lms/static/sass/course/_gradebook.scss b/lms/static/sass/course/_gradebook.scss index 3355f96260..a7a6ec85d1 100644 --- a/lms/static/sass/course/_gradebook.scss +++ b/lms/static/sass/course/_gradebook.scss @@ -195,6 +195,8 @@ div.gradebook-wrapper { .student-table tr:hover td, .grade-table tr:hover td, + .student-table tr:focus td, + .grade-table tr:focus td, .student-table tr.highlight td, .grade-table tr.highlight td { border-color: #74b7d6; diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss index ce6358c33f..b668241a15 100644 --- a/lms/static/sass/course/_info.scss +++ b/lms/static/sass/course/_info.scss @@ -105,7 +105,7 @@ div.info-wrapper { display: block; padding: 0; - &:hover { + &:hover, &:focus { background: transparent; } } @@ -140,7 +140,7 @@ div.info-wrapper { @include inline-block; padding: 0; - &:hover { + &:hover, &:focus { background: transparent; } } @@ -161,7 +161,7 @@ div.info-wrapper { @include inline-block; padding: 0; - &:hover { + &:hover, &:focus { background: transparent; } } @@ -177,7 +177,7 @@ div.info-wrapper { position: absolute; width: 100%; - &:hover { + &:hover, &:focus { opacity: 0.6; filter: alpha(opacity=60); diff --git a/lms/static/sass/course/_open_ended_grading.scss b/lms/static/sass/course/_open_ended_grading.scss index c41fe58b80..b95eca6b02 100644 --- a/lms/static/sass/course/_open_ended_grading.scss +++ b/lms/static/sass/course/_open_ended_grading.scss @@ -44,7 +44,8 @@ padding: 5px 0px; font-size: 1.1em; } - .notification-link:hover + .notification-link:hover, + .notification-link:focus { background-color: #eee; } diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss index 0f38cedff9..ae405f7b47 100644 --- a/lms/static/sass/course/_profile.scss +++ b/lms/static/sass/course/_profile.scss @@ -79,7 +79,7 @@ div.profile-wrapper { text-transform: uppercase; top: 9px; - &:hover { + &:hover, &:focus { color: #555; } } @@ -110,7 +110,7 @@ div.profile-wrapper { text-transform: uppercase; top: 9px; - &:hover { + &:hover, &:focus { color: #555; } } diff --git a/lms/static/sass/course/_textbook.scss b/lms/static/sass/course/_textbook.scss index d3632be2c5..c5c492d936 100755 --- a/lms/static/sass/course/_textbook.scss +++ b/lms/static/sass/course/_textbook.scss @@ -85,7 +85,7 @@ div.book-wrapper { color: $link-color; cursor: pointer; - &:hover { + &:hover, &:focus { background-color: transparent; color: $link-hover; @@ -101,7 +101,7 @@ div.book-wrapper { position: relative; top: 4px; - &:hover { + &:hover, &:focus { filter: alpha(opacity=60); opacity: 0.6; } @@ -161,7 +161,7 @@ div.book-wrapper { vertical-align: middle; width: 100%; - &:hover { + &:hover, &:focus { opacity: 1.0; } diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss index 28665a3303..abbe82a4aa 100644 --- a/lms/static/sass/course/base/_base.scss +++ b/lms/static/sass/course/base/_base.scss @@ -15,7 +15,7 @@ table { } a { - &:hover { + &:hover, &:focus { color: $pink; text-decoration: none !important; } diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss index dd02e71e54..b9fa8f7ef6 100644 --- a/lms/static/sass/course/base/_extends.scss +++ b/lms/static/sass/course/base/_extends.scss @@ -10,7 +10,7 @@ h1.top-header { text-transform: none; letter-spacing: 0; - &:hover { + &:hover, &:focus { text-decoration: none; } } @@ -129,7 +129,7 @@ h1.top-header { @include box-sizing(border-box); padding: lh(.25) lh(.5) lh(.25) 0; - &:hover { + &:hover, &:focus { color: #666; background: #f6f6f6; } @@ -153,7 +153,7 @@ h1.top-header { width: 16px; z-index: 99; - &:hover { + &:hover, &:focus { background-color: white; } } @@ -177,7 +177,7 @@ h1.top-header { border-left: 1px solid lighten($border-color, 10%); display: block; - &:hover { + &:hover, &:focus { background: none; } } diff --git a/lms/static/sass/course/base/_mixins.scss b/lms/static/sass/course/base/_mixins.scss index ab6e909c10..766b656afb 100644 --- a/lms/static/sass/course/base/_mixins.scss +++ b/lms/static/sass/course/base/_mixins.scss @@ -12,7 +12,7 @@ text-shadow: 0 1px 0 rgba(0, 0, 0, .3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); - &:hover { + &:hover, &:focus { border-color: #297095; @include linear-gradient(top, #4fbbe4, #2090d0); } @@ -32,7 +32,7 @@ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); - &:hover { + &:hover, &:focus { @include linear-gradient(top, #fff, #ddd); } } @@ -51,7 +51,7 @@ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.6); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 1px 1px rgba(0, 0, 0, .15); - &:hover { + &:hover, &:focus { background: -webkit-linear-gradient(top, #888, #666); } } \ No newline at end of file diff --git a/lms/static/sass/course/courseware/_amplifier.scss b/lms/static/sass/course/courseware/_amplifier.scss index 002035bbed..10e13a49b3 100644 --- a/lms/static/sass/course/courseware/_amplifier.scss +++ b/lms/static/sass/course/courseware/_amplifier.scss @@ -64,7 +64,7 @@ section.tool-wrapper { letter-spacing: 1px; text-transform: uppercase; - &:hover { + &:hover, &:focus { color: #eee8d5; } } @@ -236,7 +236,7 @@ section.tool-wrapper { box-shadow: inset 0 1px 0 lighten( #586e75, 20% ); margin-top: -.3em; - &:hover, &:active { + &:hover, &:active, &:focus { background-color: lighten( #586e75, 10% ); } } diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss index c8e9e233e7..83e1885324 100644 --- a/lms/static/sass/course/courseware/_sidebar.scss +++ b/lms/static/sass/course/courseware/_sidebar.scss @@ -24,12 +24,13 @@ section.course-index { border-radius: 0; margin: 0; overflow: visible; + font-size: 16px; &:first-child { border: none; } - &:hover { + &:hover, &:focus { color: #666; } @@ -47,13 +48,14 @@ section.course-index { border-radius: 0; box-shadow: none; padding-left: 19px; + color: $link-color; } &.ui-state-active { @extend .active; border-bottom: none; - &:hover { + &:hover, &:focus { background: none; } } @@ -88,7 +90,7 @@ section.course-index { box-shadow: 0 1px 0 #fff inset; } - &:hover { + &:hover, &:focus { background-color: #fff } } @@ -134,7 +136,7 @@ section.course-index { } } - &:hover { + &:hover, &:focus { background: rgba(0, 0, 0, .1); > a p { diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss index 294b3e9670..92f01dce1a 100644 --- a/lms/static/sass/course/instructor/_instructor_2.scss +++ b/lms/static/sass/course/instructor/_instructor_2.scss @@ -350,7 +350,7 @@ section.instructor-dashboard-content-2 { height: 10px; background: url('../images/moderator-delete-icon.png') left center no-repeat; opacity: 0.7; - &:hover { opacity: 0.8; } + &:hover, &:focus { opacity: 0.8; } &:active { opacity: 0.9; } // @include idashbutton($danger-red); @@ -493,7 +493,7 @@ section.instructor-dashboard-content-2 { height: 17px; background: url('../images/info-icon-dark.png') left center no-repeat; opacity: 0.35; - &:hover { opacity: 0.45; } + &:hover, &:focus { opacity: 0.45; } &:active { opacity: 0.5; } } diff --git a/lms/static/sass/course/layout/_calculator.scss b/lms/static/sass/course/layout/_calculator.scss index b60ae2285b..02e32ffd4f 100644 --- a/lms/static/sass/course/layout/_calculator.scss +++ b/lms/static/sass/course/layout/_calculator.scss @@ -26,7 +26,7 @@ div.calc-main { top: -45px; width: 16px; - &:hover { + &:hover, &:focus { opacity: 0.8; } diff --git a/lms/static/sass/course/layout/_chat.scss b/lms/static/sass/course/layout/_chat.scss index f3b3f33dca..b9724ef4b4 100644 --- a/lms/static/sass/course/layout/_chat.scss +++ b/lms/static/sass/course/layout/_chat.scss @@ -25,7 +25,8 @@ cursor: pointer; } -#chat-toggle:hover { +#chat-toggle:hover, +#chat-toggle:focus { text-decoration: none; } diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss index 95765fc93c..9bd1ce49fa 100644 --- a/lms/static/sass/course/layout/_courseware_header.scss +++ b/lms/static/sass/course/layout/_courseware_header.scss @@ -45,7 +45,7 @@ nav.course-material { text-decoration: none; // text-shadow: 0 1px 0 rgba(0, 0, 0, .4); - &:hover { + &:hover, &:focus { color: #333; background: rgba(255, 255, 255, .6); } diff --git a/lms/static/sass/course/layout/_courseware_subnav.scss b/lms/static/sass/course/layout/_courseware_subnav.scss index c06b1435f3..eaffa28668 100644 --- a/lms/static/sass/course/layout/_courseware_subnav.scss +++ b/lms/static/sass/course/layout/_courseware_subnav.scss @@ -31,7 +31,7 @@ nav.course-material { text-decoration: none; text-shadow: 0 1px rgb(255,255,255); - &:hover { + &:hover, &:focus { color: $base-font-color; } diff --git a/lms/static/sass/course/wiki/_create.scss b/lms/static/sass/course/wiki/_create.scss index f1c0473858..c967410d38 100644 --- a/lms/static/sass/course/wiki/_create.scss +++ b/lms/static/sass/course/wiki/_create.scss @@ -53,7 +53,7 @@ form#wiki_revision { margin-top: lh(); width: flex-grid(3, 9); - &:hover { + &:hover, &:focus { color: #333; } diff --git a/lms/static/sass/course/wiki/_wiki.scss b/lms/static/sass/course/wiki/_wiki.scss index 022d08b81f..f79385bc90 100644 --- a/lms/static/sass/course/wiki/_wiki.scss +++ b/lms/static/sass/course/wiki/_wiki.scss @@ -87,7 +87,7 @@ section.wiki { font-size: 0.72em; font-weight: 600; - &:hover { + &:hover, &:focus { text-decoration: none; } } @@ -260,7 +260,7 @@ section.wiki { font-size: 0.9em; line-height: 25px; - &:hover { + &:hover, &:focus { background-color: #f6f6f6; text-decoration: none; } @@ -302,7 +302,7 @@ section.wiki { background-position: -25px -99px; } - &:hover { + &:hover, &:focus { background: none; } } @@ -349,7 +349,7 @@ section.wiki { background-position: 0 -99px; } - &:hover { + &:hover, &:focus { background-color: #f6f6f6; text-decoration: none; } @@ -465,7 +465,7 @@ section.wiki { text-transform: none !important; letter-spacing: 0 !important; - &:hover { + &:hover, &:focus { color: $base-font-color; text-decoration: none; } @@ -662,7 +662,7 @@ section.wiki { background: #f9f9f9; border-radius: 5px; - a:hover { + a:hover, a:focus { text-decoration: none; } } @@ -823,7 +823,7 @@ section.wiki { a { color: #aaa; - &:hover { + &:hover, &:focus { color: #777; } } @@ -1007,7 +1007,7 @@ section.wiki { text-align: center; -webkit-font-smoothing: antialiased; - &:hover { + &:hover, &:focus { background: darken($pink, 12%); } } @@ -1078,7 +1078,7 @@ section.wiki { text-transform: none !important; letter-spacing: 0 !important; - &:hover { + &:hover, &:focus { color: $base-font-color; text-decoration: none; } diff --git a/lms/static/sass/elements/_controls.scss b/lms/static/sass/elements/_controls.scss index 3582f51132..4846a14ae5 100644 --- a/lms/static/sass/elements/_controls.scss +++ b/lms/static/sass/elements/_controls.scss @@ -8,7 +8,7 @@ cursor: pointer; text-decoration: none; - &:hover, &:active { + &:hover, &:active, &:focus { text-decoration: none; } @@ -39,13 +39,13 @@ padding: ($baseline*0.75) $baseline; text-align: center; - &:hover, &:active { + &:hover, &:active, &:focus { } &.current, &.active { - &:hover, &:active { + &:hover, &:active, &:focus { } } @@ -63,7 +63,7 @@ background: $m-gray; color: $white; - &:hover, &:active { + &:hover, &:active, &:focus { background: $m-gray-l1; color: $white; } @@ -73,7 +73,7 @@ background: $m-gray; color: $m-gray-l1; - &:hover, &:active { + &:hover, &:active, &:focus { box-shadow: inset 0 2px 1px 1px $m-gray-d3; color: $m-gray-d3; } @@ -91,7 +91,7 @@ background: $m-blue-d3; color: $white; - &:hover, &:active { + &:hover, &:active, &:focus { background: $m-blue-d1; color: $white; } @@ -101,7 +101,7 @@ background: $m-blue; color: $m-blue-d2; - &:hover, &:active { + &:hover, &:active, &:focus { box-shadow: inset 0 2px 1px 1px $m-blue-d3; color: $m-blue-d3; } @@ -119,7 +119,7 @@ background: $m-pink; color: $white; - &:hover, &:active { + &:hover, &:active, &:focus { background: $m-pink-l3; color: $white; } @@ -129,7 +129,7 @@ background: $m-pink-l2; color: $m-pink-d1; - &:hover, &:active { + &:hover, &:active, &:focus { box-shadow: inset 0 2px 1px 1px $m-pink-d2; color: $m-pink-d3; } @@ -147,7 +147,7 @@ background: $m-green-d1; color: $white; - &:hover, &:active { + &:hover, &:active, &:focus { background: $m-green-s1; color: $white; } @@ -157,7 +157,7 @@ background: $m-green-l2; color: $m-green; - &:hover, &:active { + &:hover, &:active, &:focus { box-shadow: inset 0 2px 1px 1px $m-green-d1; color: $m-green-d1; } @@ -176,7 +176,7 @@ cursor: default; pointer-events: none; box-shadow: none; - :hover { + :hover, :focus { pointer-events: none; } } diff --git a/lms/static/sass/elements/_typography.scss b/lms/static/sass/elements/_typography.scss index 2cf11ce79b..fc9acabc89 100644 --- a/lms/static/sass/elements/_typography.scss +++ b/lms/static/sass/elements/_typography.scss @@ -271,7 +271,7 @@ %copy-link { border-bottom: 1px dotted transparent; - &:hover, &:active { + &:hover, &:active, &:focus { border-color: $link-color-d1; } } diff --git a/lms/static/sass/ie.scss b/lms/static/sass/ie.scss index 258707a497..a2dc84de38 100644 --- a/lms/static/sass/ie.scss +++ b/lms/static/sass/ie.scss @@ -13,13 +13,14 @@ // hide all actions .home > header .title .actions, - .home > header .title:hover .actions { + .home > header .title:hover .actions, + .home > header .title:focus .actions { display: none; height: auto; } .home > header .title { - &:hover { + &:hover, &:focus { > hgroup { h1 { @@ -49,7 +50,7 @@ position: static; } - &:hover { + &:hover, &:focus { text-decoration: none; &::before { @@ -117,7 +118,7 @@ } } - &:hover { + &:hover, &:focus { background: rgb(245,245,245); border-color: rgb(170,170,170); box-shadow: 0 1px 16px 0 rgba($blue, 0.4); diff --git a/lms/static/sass/multicourse/_about_pages.scss b/lms/static/sass/multicourse/_about_pages.scss index ca573377ec..78840f8f7f 100644 --- a/lms/static/sass/multicourse/_about_pages.scss +++ b/lms/static/sass/multicourse/_about_pages.scss @@ -24,7 +24,7 @@ @include transition(all 0.15s linear 0s); text-transform: lowercase; - &:hover, &.active { + &:hover, &.active, &:focus { border-color: rgb(200,200,200); color: $base-font-color; text-decoration: none; @@ -165,7 +165,7 @@ padding: 12px 0px 12px 20px; text-align: left; - &:hover { + &:hover, &:focus { background: rgb(245,245,245); text-decoration: none; } diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss index f1cda25654..fa8d5f9c38 100644 --- a/lms/static/sass/multicourse/_account.scss +++ b/lms/static/sass/multicourse/_account.scss @@ -173,14 +173,14 @@ a { @include transition(color 0.15s ease-in-out 0s, border 0.15s ease-in-out 0s); - &:link, &:visited, &:hover, &:active { + &:link, &:visited, &:hover, &:active, &:focus { color: $link-color-d1; font-weight: 400; text-decoration: none !important; // needed but nasty font-family: $sans-serif; } - &:hover, &:active { + &:hover, &:active, &:focus { text-decoration: none !important; // needed but nasty border-bottom: 1px dotted $link-color-d1; } diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss index 26bafff87d..5eeb837fb1 100644 --- a/lms/static/sass/multicourse/_course_about.scss +++ b/lms/static/sass/multicourse/_course_about.scss @@ -214,7 +214,7 @@ } } - &:hover { + &:hover, &:focus { text-decoration: none; .play-intro { @@ -261,7 +261,7 @@ margin-left: 0px; } - &:hover, &.active { + &:hover, &.active, &:focus { border-color: $border-color-2; color: $base-font-color; text-decoration: none; @@ -411,7 +411,7 @@ margin-right: 15px; padding-right: 15px; - &:hover { + &:hover, &:focus { color: $lighter-base-font-color; } } @@ -427,7 +427,7 @@ float: none; - &:hover { + &:hover, &:focus { .sharing-message { opacity: 1.0; top: 56px; @@ -456,7 +456,7 @@ top: 65px; width: 220px; - &:hover { + &:hover, &:focus { opacity: 0; } } @@ -469,7 +469,7 @@ @include transition(all 0.15s linear 0s); width: 44px; - &:hover { + &:hover, &:focus { opacity: 1.0; } @@ -512,7 +512,7 @@ } } - &:hover { + &:hover, &:focus { .icon { opacity: 1.0; } diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index 9ca37e9c9d..ad8919f69a 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -75,7 +75,7 @@ margin-bottom: 15px; padding-bottom: 17px; - &:hover { + &:hover, &:focus { .title .icon { opacity: 1.0; } @@ -162,7 +162,7 @@ border-radius: 11px; background: $dot-color; - &:hover { + &:hover, &:focus { background: $lighter-base-font-color; } @@ -265,7 +265,7 @@ padding: 5px 10px; text-shadow: 0 1px rgba(255,255,255, 0.6); - &:hover { + &:hover, &:focus { color: $link-color; text-decoration: none; } @@ -350,7 +350,7 @@ line-height: 42px; font-weight: 300; - &:hover { + &:hover, &:focus { text-decoration: none; } } @@ -405,12 +405,12 @@ font: normal 15px/1.6rem $sans-serif; padding: 6px 32px 7px; - &:hover { + &:hover, &:focus { text-decoration: none; } } - &:hover { + &:hover, &:focus { text-decoration: none; } } @@ -522,7 +522,7 @@ &.disabled { cursor: default !important; - &:hover { + &:hover, &:focus { background: #eee; background-image: -webkit-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%); background-image: -moz-linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%); @@ -584,7 +584,7 @@ font-weight: bold; letter-spacing: 0; - &:hover { + &:hover, &:focus { text-decoration: none; } } @@ -624,7 +624,7 @@ font-size: .8em; margin-top: 32px; - &:hover { + &:hover, &:focus { color: #333; } } diff --git a/lms/static/sass/multicourse/_edge.scss b/lms/static/sass/multicourse/_edge.scss index 30d5c0815a..d38f648d04 100644 --- a/lms/static/sass/multicourse/_edge.scss +++ b/lms/static/sass/multicourse/_edge.scss @@ -23,12 +23,12 @@ $paleYellow: #fffcf1; color: $darkGrey !important; pointer-events: none; cursor: none; - &:hover { + &:hover, &:focus { box-shadow: 0 0 0 0 !important; } } - &:hover { + &:hover, &:focus { box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 1px 1px rgba(0, 0, 0, .15); text-decoration: none; } @@ -42,7 +42,7 @@ $paleYellow: #fffcf1; background-color: $blue; color: #fff; - &:hover { + &:hover, &:focus { background-color: #62aaf5; color: #fff; } @@ -57,7 +57,7 @@ $paleYellow: #fffcf1; box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset; color: #6d788b; - &:hover { + &:hover, &:focus { background-color: #d9e3ee; color: #6d788b; } @@ -72,7 +72,7 @@ $paleYellow: #fffcf1; border-bottom: 3px solid $blue; } - a:hover { + a:hover, a:focus { text-decoration: none; } diff --git a/lms/static/sass/multicourse/_help.scss b/lms/static/sass/multicourse/_help.scss index 9cc0030efb..b1ea577b39 100644 --- a/lms/static/sass/multicourse/_help.scss +++ b/lms/static/sass/multicourse/_help.scss @@ -18,7 +18,7 @@ padding: 12px 0px 12px 20px; text-align: left; - &:hover { + &:hover, &:focus { background: rgb(245,245,245); text-decoration: none; } diff --git a/lms/static/sass/multicourse/_home.scss b/lms/static/sass/multicourse/_home.scss index 881437da04..347a9a915c 100644 --- a/lms/static/sass/multicourse/_home.scss +++ b/lms/static/sass/multicourse/_home.scss @@ -43,7 +43,7 @@ @include transition(all 0.2s linear 0s); vertical-align: top; - &:hover { + &:hover, &:focus { .actions { display: none; } @@ -93,7 +93,7 @@ width: flex-grid(2) + flex-gutter(); z-index: 2; - &:hover { + &:hover, &:focus { text-decoration: underline; } @@ -140,7 +140,7 @@ } } - &:hover { + &:hover, &:focus { .play-intro { @include background-image(linear-gradient(-90deg, rgba(0,0,0, 0.75), rgba(0,0,0, 0.8))); box-shadow: 0 1px 12px 0 rgba(0,0,0, 0.5); @@ -295,7 +295,7 @@ text-shadow: 0 1px rgba(255,255,255, 0.6); @include transition(all 0.15s ease-in-out 0s); - &:hover { + &:hover, &:focus { color: $lighter-base-font-color; } } @@ -308,7 +308,7 @@ z-index: 2; } - &:hover { + &:hover, &:focus { text-decoration: none; &::before { @@ -354,7 +354,7 @@ font-size: 1.0em; } - &:hover { + &:hover, &:focus { .name { bottom: 14px; } @@ -431,7 +431,7 @@ @include transition(all 0.15s linear 0s); width: flex-grid(4); - &:hover { + &:hover, &:focus { background: $body-bg; border: 1px solid $border-color-2; box-shadow: inset 0 0 3px 0 rgba(0,0,0, 0.1); @@ -467,7 +467,7 @@ color: $base-font-color; font: 700 1em/1.2em $sans-serif; - &:hover { + &:hover, &:focus { color: $blue; text-decoration: underline; } @@ -500,7 +500,7 @@ float: right; color: lighten($base-font-color, 50%); - &:hover { + &:hover, &:focus { color: $blue; text-decoration: underline; } diff --git a/lms/static/sass/multicourse/_jobs.scss b/lms/static/sass/multicourse/_jobs.scss index f9629232d6..e5caee6810 100644 --- a/lms/static/sass/multicourse/_jobs.scss +++ b/lms/static/sass/multicourse/_jobs.scss @@ -97,7 +97,7 @@ padding: 12px 0px 12px 20px; text-align: left; - &:hover { + &:hover, &:focus { background: rgb(245,245,245); text-decoration: none; } diff --git a/lms/static/sass/multicourse/_media-kit.scss b/lms/static/sass/multicourse/_media-kit.scss index 1c6d787760..adcacb2883 100644 --- a/lms/static/sass/multicourse/_media-kit.scss +++ b/lms/static/sass/multicourse/_media-kit.scss @@ -77,7 +77,7 @@ $white: rgb(255,255,255); } } - &:hover { + &:hover, &:focus { .note { color: shade($blue, 25%); @@ -228,7 +228,7 @@ $white: rgb(255,255,255); border: 2px solid tint($light-gray,75%); padding: $baseline; - &:hover { + &:hover, &:focus { border-color: $blue; } } diff --git a/lms/static/sass/multicourse/_testcenter-register.scss b/lms/static/sass/multicourse/_testcenter-register.scss index 754b1428de..e39c25b387 100644 --- a/lms/static/sass/multicourse/_testcenter-register.scss +++ b/lms/static/sass/multicourse/_testcenter-register.scss @@ -484,7 +484,7 @@ } } - &:hover { + &:hover, &:focus { .details, .item, .instructions { opacity: 1.0; @@ -546,7 +546,7 @@ font-size: 13px; font-weight: bold; - &:hover { + &:hover, &:focus { text-decoration: none; } } @@ -681,7 +681,7 @@ font-weight: bold; letter-spacing: 0; - &:hover { + &:hover, &:focus { text-decoration: none; } } @@ -743,7 +743,7 @@ color: $red; text-decoration: none; - &:hover, &:active { + &:hover, &:active, &:focus { text-decoration: underline; } } diff --git a/lms/static/sass/shared/_course_filter.scss b/lms/static/sass/shared/_course_filter.scss index a8bf7f9fdc..6ac23849f3 100644 --- a/lms/static/sass/shared/_course_filter.scss +++ b/lms/static/sass/shared/_course_filter.scss @@ -62,7 +62,7 @@ } } - &:hover { + &:hover, &:focus { .filter-heading { background: rgb(255,255,255); @include background-image(linear-gradient(-90deg, rgb(250,250,250), rgb(255,255,255))); diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss index 3321afd92d..212d7c9015 100644 --- a/lms/static/sass/shared/_course_object.scss +++ b/lms/static/sass/shared/_course_object.scss @@ -232,7 +232,7 @@ margin-right: 10px; padding-right: 10px; - &:hover { + &:hover, &:focus { color: $link-color; } } @@ -244,7 +244,7 @@ } } - &:hover { + &:hover, &:focus { background: $course-profile-bg; border-color: $border-color-1; box-shadow: 0 1px 16px 0 rgba($shadow-color, 0.4); diff --git a/lms/static/sass/shared/_footer.scss b/lms/static/sass/shared/_footer.scss index 888f19ac88..f76e114cc4 100644 --- a/lms/static/sass/shared/_footer.scss +++ b/lms/static/sass/shared/_footer.scss @@ -18,14 +18,14 @@ a { @include transition(link-color 0.15s ease-in-out 0s, border 0.15s ease-in-out 0s); - &:link, &:visited, &:hover, &:active { + &:link, &:visited, &:hover, &:focus, &:active { border-bottom: none; color: $link-color; text-decoration: none !important; font-family: $sans-serif; } - &:hover, &:active { + &:hover, &:focus, &:active { border-bottom: 1px dotted $link-color; color: $link-color; } @@ -48,7 +48,7 @@ a { color: tint($black, 20%); - &:hover, &:active { + &:hover, &:focus, &:active { color: $link-color; } } @@ -100,7 +100,7 @@ a { display: block; - &:hover, &:active { + &:hover, &:focus, &:active { border: none; } } diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss index b3ca2077f0..3a0a34f415 100644 --- a/lms/static/sass/shared/_header.scss +++ b/lms/static/sass/shared/_header.scss @@ -66,7 +66,7 @@ header.global { margin-right: 0px; } - &:hover { + &:hover, &:focus { color: $base-font-color; } } @@ -98,7 +98,7 @@ header.global { margin-right: 0px; } - &:hover, &.active { + &:hover, &:focus, &.active { background: $button-bg-hover-color; } } @@ -156,7 +156,7 @@ header.global { width: 26px; } - &:hover { + &:hover, &:focus { .avatar { opacity: 0.8; } @@ -224,7 +224,7 @@ header.global { white-space: nowrap; width: 100%; - &:hover { + &:hover, &:focus { color: $base-font-color; text-decoration: none; } @@ -256,7 +256,7 @@ header.global { color: $lighter-base-font-color; font-weight: 600; - &:hover, &:active { + &:hover, &:focus, &:active { text-decoration: none; color: $link-color; } diff --git a/lms/static/sass/shared/_modal.scss b/lms/static/sass/shared/_modal.scss index 8b9ad63836..fad5585eaf 100644 --- a/lms/static/sass/shared/_modal.scss +++ b/lms/static/sass/shared/_modal.scss @@ -109,8 +109,8 @@ } .modal-form-error { - background: $error-red; - border: 1px solid rgb(202, 17, 17); + background: tint($red,90%); + border: 1px solid rgb(143, 14, 14); color: rgb(143, 14, 14); display: none; margin-bottom: 20px; @@ -195,7 +195,7 @@ margin-bottom: 20px; padding: 8px 10px; - &:hover { + &:hover, &:focus { background: rgb(230,230,230); } @@ -262,7 +262,7 @@ font-style: italic; text-decoration: underline; - &:hover { + &:hover, &:focus { color: $base-font-color; } } @@ -288,7 +288,7 @@ text-shadow: 0 1px rgba(255,255,255, 0.8); @include transition(all 0.15s ease-out 0s); - &:hover { + &:hover, &:focus { color: $base-font-color; text-decoration: none; } diff --git a/lms/static/sass/views/_verification.scss b/lms/static/sass/views/_verification.scss index 40795b922b..589c45f7d3 100644 --- a/lms/static/sass/views/_verification.scss +++ b/lms/static/sass/views/_verification.scss @@ -1560,7 +1560,7 @@ @include font-size(24); color: $m-blue-d3; - &:hover { + &:hover, &:focus { color: $m-blue-d1; border: none; } diff --git a/lms/templates/courseware/course_about.html b/lms/templates/courseware/course_about.html index 382dbf4660..0afce28595 100644 --- a/lms/templates/courseware/course_about.html +++ b/lms/templates/courseware/course_about.html @@ -162,14 +162,14 @@ % if get_course_about_section(course, "video"):
- +
%else:
- +
% endif @@ -203,19 +203,20 @@ ## want here (and on this whole page, really). % if self.stanford_theme_enabled(): % else: - % endif diff --git a/lms/templates/video.html b/lms/templates/video.html index 07855f1aae..b4bae8a91e 100644 --- a/lms/templates/video.html +++ b/lms/templates/video.html @@ -44,48 +44,50 @@
-
+ + +
-
+