Skip to content

E
edx-platform
Commit 5a46177a by Giulio Gratta
Options

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
parent 9e76c612
Showing with 199 additions and 188 deletions
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 {
......
common/lib/xmodule/xmodule/templates/about/overview.yaml
......@@ -19,7 +19,7 @@ data: |
<h2>Course Staff</h2>
<article class="teacher">
<div class="teacher-image">
<img src="/static/images/pl-faculty.png" align="left" style="margin:0 20 px 0">
<img src="/static/images/pl-faculty.png" align="left" style="margin:0 20 px 0" alt="Course Staff Image #1">
</div>
<h3>Staff Member #1</h3>
......@@ -28,7 +28,7 @@ data: |
<article class="teacher">
<div class="teacher-image">
<img src="/static/images/pl-faculty.png" align="left" style="margin:0 20 px 0">
<img src="/static/images/pl-faculty.png" align="left" style="margin:0 20 px 0" alt="Course Staff Image #2">
</div>
<h3>Staff Member #2</h3>
......
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;
}
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;
}
}
......
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;
}
......
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; }
......
lms/static/sass/course/_discussions-inline.scss
......@@ -275,7 +275,7 @@
padding-bottom: 2px;
border-color: #333;
&:hover {
&:hover, &:focus {
border-color: #222;
}
}
......
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;
......
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);
......
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;
}
......
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;
}
}
......
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;
}
......
lms/static/sass/course/base/_base.scss
......@@ -15,7 +15,7 @@ table {
}
a {
&:hover {
&:hover, &:focus {
color: $pink;
text-decoration: none !important;
}
......
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;
}
}
......
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
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% );
}
}
......
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 {
......
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; }
}
......
lms/static/sass/course/layout/_calculator.scss
......@@ -26,7 +26,7 @@ div.calc-main {
top: -45px;
width: 16px;
&:hover {
&:hover, &:focus {
opacity: 0.8;
}
......
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;
}
......
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);
}
......
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;
}
......
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;
}
......
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;
}
......
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;
}
}
......
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;
}
}
......
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);
......
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;
}
......
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;
}
......
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;
}
......
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;
}
}
......
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;
}
......
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;
}
......
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;
}
......
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;
}
......
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;
}
}
......
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;
}
}
......
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)));
......
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);
......
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;
}
}
......
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;
}
......
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;
}
......
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;
}
......
lms/templates/courseware/course_about.html
......@@ -162,14 +162,14 @@
% if get_course_about_section(course, "video"):
<a href="#video-modal" class="media" rel="leanModal">
<div class="hero">
<img src="${course_image_url(course)}" />
<img src="${course_image_url(course)}" alt="" />
<div class="play-intro"></div>
</div>
</a>
%else:
<div class="media">
<div class="hero">
<img src="${course_image_url(course)}" />
<img src="${course_image_url(course)}" alt="" />
</div>
</div>
% endif
......@@ -203,19 +203,20 @@
## want here (and on this whole page, really).
% if self.stanford_theme_enabled():
<a href="http://twitter.com/intent/tweet?text=I+just+registered+for+${course.number}+${get_course_about_section(course, 'title')}!+(http://class.stanford.edu)" class="share">
<img src="${static.url('images/social/twitter-sharing.png')}">
<img src="${static.url('images/social/twitter-sharing.png')}" alt="Tweet that you've registered for this course">
</a>
<a href="mailto:?subject=Take%20a%20course%20at%20Stanford%20online!&body=I%20just%20registered%20for%20${course.number}%20${get_course_about_section(course, 'title')}+(http://class.stanford.edu)" class="share">
<img src="${static.url('images/social/email-sharing.png')}">
<img src="${static.url('images/social/email-sharing.png')}" alt="Email someone to say you've registered for this course">
</a>
% else:
<a href="http://twitter.com/intent/tweet?text=I+just+registered+for+${course.number}+${get_course_about_section(course, 'title')}+through+@edxonline:+http://www.edx.org${reverse('about_course', args=[course.id])}" class="share">
<img src="${static.url('images/social/twitter-sharing.png')}">
<img src="${static.url('images/social/twitter-sharing.png')}" alt="Tweet that you've registered for this course">
</a>
<a href="http://www.facebook.com/EdxOnline" class="share"> <img src="${static.url('images/social/facebook-sharing.png')}">
<a href="http://www.facebook.com/EdxOnline" class="share">
<img src="${static.url('images/social/facebook-sharing.png')}" alt="Post a Facebook message to say you've registered for this course">
</a>
<a href="mailto:?subject=Take%20a%20course%20with%20edX%20online&body=I%20just%20registered%20for%20${course.number}%20${get_course_about_section(course, 'title')}%20through%20edX:+http://edx.org/${reverse('about_course', args=[course.id])}" class="share">
<img src="${static.url('images/social/email-sharing.png')}">
<img src="${static.url('images/social/email-sharing.png')}" alt="Email someone to say you've registered for this course">
</a>
% endif
</div>
......
lms/templates/video.html
......@@ -44,48 +44,50 @@
<div class="focus_grabber first"></div>
<div class="tc-wrapper">
<article class="video-wrapper">
<div class="video-player-pre"></div>
<section class="video-player">
<div id="${id}"></div>
<h3 class="hidden">${_('ERROR: No playable video sources found!')}</h3>
</section>
<div class="video-player-post"></div>
<section class="video-controls">
<div class="slider" title="Video position"></div>
<div>
<ul class="vcr">
<li><a class="video_control" href="#" title="${_('Play')}" role="button" aria-disabled="false"></a></li>
<li><div class="vidtime">0:00 / 0:00</div></li>
</ul>
<div class="secondary-controls">
<div class="speeds">
<a href="#" title="${_('Speeds')}" role="button" aria-disabled="false">
<h3>${_('Speed')}</h3>
<p class="active"></p>
</a>
<ol class="video_speeds"></ol>
</div>
<div class="volume">
<a href="#" title="${_('Volume')}" role="button" aria-disabled="false"></a>
<div class="volume-slider-container">
<div class="volume-slider"></div>
</div>
</div>
<a href="#" class="add-fullscreen" title="${_('Fill browser')}" role="button" aria-disabled="false">${_('Fill browser')}</a>
<a href="#" class="quality_control" title="${_('HD off')}" role="button" aria-disabled="false">${_('HD off')}</a>
<a href="#" class="hide-subtitles" title="${_('Turn off captions')}" role="button" aria-disabled="false">${_('Turn off captions')}</a>
</div>
</div>
</section>
</article>
<ol class="subtitles" tabindex="0" title="${_('Captions')}" role="group" aria-label="${_('Activating an item in this group will spool the video to the corresponding time point')}"><li></li></ol>
<a href="#transcript-captions" class="sr">Skip to clickable transcript video links.</a>
<article class="video-wrapper">
<div class="video-player-pre"></div>
<section class="video-player">
<div id="${id}"></div>
<h3 class="hidden">${_('ERROR: No playable video sources found!')}</h3>
</section>
<div class="video-player-post"></div>
<section class="video-controls">
<div class="slider" title="Video position"></div>
<div>
<ul class="vcr">
<li><a class="video_control" href="#" title="${_('Play')}" role="button" aria-disabled="false"></a></li>
<li><div class="vidtime">0:00 / 0:00</div></li>
</ul>
<div class="secondary-controls">
<div class="speeds">
<a href="#" title="${_('Speeds')}" role="button" aria-disabled="false">
<h3>${_('Speed')}</h3>
<p class="active"></p>
</a>
<ol class="video_speeds"></ol>
</div>
<div class="volume">
<a href="#" title="${_('Volume')}" role="button" aria-disabled="false"></a>
<div class="volume-slider-container">
<div class="volume-slider"></div>
</div>
</div>
<a href="#" class="add-fullscreen" title="${_('Fill browser')}" role="button" aria-disabled="false">${_('Fill browser')}</a>
<a href="#" class="quality_control" title="${_('HD off')}" role="button" aria-disabled="false">${_('HD off')}</a>
<a href="#" class="hide-subtitles" title="${_('Turn off captions')}" role="button" aria-disabled="false">${_('Turn off captions')}</a>
</div>
</div>
</section>
</article>
<ol id="transcript-captions" class="subtitles" tabindex="0" title="${_('Captions')}" role="group" aria-label="${_('Activating an item in this group will spool the video to the corresponding time point')}"><li></li></ol>
</div>
<div class="focus_grabber last"></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment