Skip to content

E
edx-platform
Commit b3723b1a by caesar2164
Options

Merge pull request #288 from edx/giulio/accessibility-2 

Round 2 Accessibility Changes
parents 852292eb 3c461f7a
Showing with 30 additions and 31 deletions
common/lib/xmodule/xmodule/css/sequence/display.scss
...@@ -166,7 +166,6 @@ nav.sequence-nav { ...@@ -166,7 +166,6 @@ nav.sequence-nav {
p { p {
background: #333; background: #333;
color: #fff; color: #fff;
display: none;
font-family: $sans-serif; font-family: $sans-serif;
line-height: lh(); line-height: lh();
left: 0px; left: 0px;
......
lms/static/sass/_discussion.scss
...@@ -257,7 +257,6 @@ body.discussion { ...@@ -257,7 +257,6 @@ body.discussion {
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
color: #333; color: #333;
outline: 0;
} }
} }
...@@ -932,7 +931,6 @@ body.discussion { ...@@ -932,7 +931,6 @@ body.discussion {
font-size: 11px; font-size: 11px;
line-height: 16px; line-height: 16px;
color: #333; color: #333;
outline: 0;
} }
.post-search { .post-search {
...@@ -959,7 +957,6 @@ body.discussion { ...@@ -959,7 +957,6 @@ body.discussion {
font-size: 13px; font-size: 13px;
line-height: 20px; line-height: 20px;
color: #333; color: #333;
outline: 0;
cursor: pointer; cursor: pointer;
pointer-events: none; pointer-events: none;
@include transition(all .2s ease-out); @include transition(all .2s ease-out);
...@@ -1642,7 +1639,6 @@ body.discussion { ...@@ -1642,7 +1639,6 @@ body.discussion {
border-radius: 3px; border-radius: 3px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset; box-shadow: 0 1px 3px rgba(0, 0, 0, .1) inset;
@include transition(border-color .1s); @include transition(border-color .1s);
outline: 0;
&:focus { &:focus {
border-color: #4697c1; border-color: #4697c1;
......
lms/static/sass/base/_base.scss
...@@ -84,6 +84,14 @@ a:link, a:visited { ...@@ -84,6 +84,14 @@ a:link, a:visited {
} }
} }
a:focus {
/**
* Add general focus styling here
* for example:
* outline: 3px groove $black;
**/
}
.content-wrapper { .content-wrapper {
width: flex-grid(12); width: flex-grid(12);
margin: 0 auto; margin: 0 auto;
......
lms/static/sass/base/_reset.scss
...@@ -9,9 +9,6 @@ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 10 ...@@ -9,9 +9,6 @@ html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 10
html, button, input, select, textarea { font-family: sans-serif; color: #222; } html, button, input, select, textarea { font-family: sans-serif; color: #222; }
body { margin: 0; font-size: 1em; line-height: 1.4; } body { margin: 0; font-size: 1em; line-height: 1.4; }
::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
::selection { background: #fe57a1; color: #fff; text-shadow: none; }
a { color: #00e; } a { color: #00e; }
a:visited { color: #551a8b; } a:visited { color: #551a8b; }
a:hover { color: #06e; } a:hover { color: #06e; }
......
lms/static/sass/base/_variables.scss
...@@ -61,6 +61,8 @@ $baseFontColor: rgb(60,60,60); ...@@ -61,6 +61,8 @@ $baseFontColor: rgb(60,60,60);
$lighter-base-font-color: rgb(100,100,100); $lighter-base-font-color: rgb(100,100,100);
$text-color: $dark-gray; $text-color: $dark-gray;
$dark-trans-bg: rgba(0, 0, 0, .75);
$body-bg: rgb(250,250,250); $body-bg: rgb(250,250,250);
$container-bg: $white; $container-bg: $white;
$header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9)); $header-image: linear-gradient(-90deg, rgba(255,255,255, 1), rgba(230,230,230, 0.9));
...@@ -104,8 +106,6 @@ $border-color-4: rgb(252,252,252); ...@@ -104,8 +106,6 @@ $border-color-4: rgb(252,252,252);
$link-color: $blue; $link-color: $blue;
$link-color-d1: $m-blue; $link-color-d1: $m-blue;
$link-hover: $pink; $link-hover: $pink;
$selection-color-1: $pink;
$selection-color-2: #444;
$site-status-color: $pink; $site-status-color: $pink;
$button-color: $blue; $button-color: $blue;
......
lms/static/sass/course/base/_base.scss
...@@ -101,12 +101,6 @@ img { ...@@ -101,12 +101,6 @@ img {
max-width: 100%; max-width: 100%;
} }
::selection, ::-moz-selection, ::-webkit-selection {
background: $selection-color-2;
color: #fff;
}
.tooltip { .tooltip {
position: absolute; position: absolute;
top: 0; top: 0;
......
lms/static/sass/course/courseware/_sidebar.scss
...@@ -23,7 +23,7 @@ section.course-index { ...@@ -23,7 +23,7 @@ section.course-index {
h3 { h3 {
@include border-radius(0); @include border-radius(0);
margin: 0; margin: 0;
overflow: hidden; overflow: visible;
&:first-child { &:first-child {
border: none; border: none;
......
lms/static/sass/course/layout/_courseware_header.scss
...@@ -148,7 +148,7 @@ header.global.slim { ...@@ -148,7 +148,7 @@ header.global.slim {
float: left; float: left;
font-size: 0.9em; font-size: 0.9em;
font-weight: 600; font-weight: 600;
color: #777; color: $lighter-base-font-color;
letter-spacing: 0; letter-spacing: 0;
margin-top: 9px; margin-top: 9px;
margin-bottom: 0; margin-bottom: 0;
......
lms/static/sass/multicourse/_account.scss
...@@ -268,7 +268,7 @@ ...@@ -268,7 +268,7 @@
@include transition(color 0.15s ease-in-out); @include transition(color 0.15s ease-in-out);
display: block; display: block;
margin-top: ($baseline/4); margin-top: ($baseline/4);
color: tint($outer-border-color, 50%); color: $lighter-base-font-color;
font-size: em(13); font-size: em(13);
} }
......
lms/static/sass/multicourse/_dashboard.scss
...@@ -561,7 +561,7 @@ ...@@ -561,7 +561,7 @@
float: right; float: right;
display: block; display: block;
font-style: italic; font-style: italic;
color: #a0a0a0; color: $lighter-base-font-color;
text-decoration: underline; text-decoration: underline;
font-size: .8em; font-size: .8em;
margin-top: 32px; margin-top: 32px;
......
lms/static/sass/shared/_course_object.scss
...@@ -66,12 +66,17 @@ ...@@ -66,12 +66,17 @@
width: 0; width: 0;
} }
a {
position: relative;
display: block;
}
a:hover { a:hover {
text-decoration: none; text-decoration: none;
} }
.meta-info { .meta-info {
background: rgba(0,0,0, 0.6); background: $dark-trans-bg;
bottom: 6px; bottom: 6px;
border: 1px solid rgba(0,0,0, 0.5); border: 1px solid rgba(0,0,0, 0.5);
@include border-right-radius(2px); @include border-right-radius(2px);
......
lms/templates/course.html
...@@ -19,7 +19,7 @@ ...@@ -19,7 +19,7 @@
</header> </header>
<section class="info"> <section class="info">
<div class="cover-image"> <div class="cover-image">
<img src="${course_image_url(course)}"> <img src="${course_image_url(course)}" alt="${course.number} ${get_course_about_section(course, 'title')} Cover Image" />
</div> </div>
<div class="desc"> <div class="desc">
<p>${get_course_about_section(course, 'short_description')}</p> <p>${get_course_about_section(course, 'short_description')}</p>
......
lms/templates/courseware/courses.html
...@@ -10,9 +10,9 @@ ...@@ -10,9 +10,9 @@
<hgroup> <hgroup>
<div class="logo"> <div class="logo">
% if self.stanford_theme_enabled(): % if self.stanford_theme_enabled():
<img src="${static.url('themes/stanford/images/seal.png')}" /> <img src="${static.url('themes/stanford/images/seal.png')}" alt="Stanford Seal Logo" />
% else: % else:
<img src="${static.url('images/edx_bw.png')}" /> <img src="${static.url('images/edx_bw.png')}" alt="Black and White edX Logo" />
% endif % endif
</div> </div>
% if self.stanford_theme_enabled(): % if self.stanford_theme_enabled():
......
lms/templates/dashboard.html
...@@ -211,11 +211,11 @@ ...@@ -211,11 +211,11 @@
% if course.id in show_courseware_links_for: % if course.id in show_courseware_links_for:
<a href="${course_target}" class="cover"> <a href="${course_target}" class="cover">
<img src="${course_image_url(course)}" /> <img src="${course_image_url(course)}" alt="${course.number} ${course.display_name_with_default} Cover Image" />
</a> </a>
% else: % else:
<div class="cover"> <div class="cover">
<img src="${course_image_url(course)}" /> <img src="${course_image_url(course)}" alt="${course.number} ${course.display_name_with_default} Cover Image" />
</div> </div>
% endif % endif
......
lms/templates/login.html
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
location.href="${reverse('dashboard')}"; location.href="${reverse('dashboard')}";
} }
} else { } else {
$('.message.submission-error').addClass('is-shown'); $('.message.submission-error').addClass('is-shown').focus();
$('.message.submission-error .message-copy').html(json.value); $('.message.submission-error .message-copy').html(json.value);
} }
}); });
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
<p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div> </div>
<div role="alert" class="status message submission-error"> <div role="alert" class="status message submission-error" tabindex="-1">
<h3 class="message-title">The following errors occured while logging you in: </h3> <h3 class="message-title">The following errors occured while logging you in: </h3>
<ul class="message-copy"> <ul class="message-copy">
<li>Your email or password is incorrect</li> <li>Your email or password is incorrect</li>
......
lms/templates/register.html
...@@ -54,7 +54,7 @@ ...@@ -54,7 +54,7 @@
$('.message.submission-error').removeClass('is-shown'); $('.message.submission-error').removeClass('is-shown');
location.href="${reverse('dashboard')}"; location.href="${reverse('dashboard')}";
} else { } else {
$('.status.message.submission-error').addClass('is-shown'); $('.status.message.submission-error').addClass('is-shown').focus();
$('.status.message.submission-error .message-copy').html(json.value).stop().css("display", "block"); $('.status.message.submission-error .message-copy').html(json.value).stop().css("display", "block");
$(".field-error").removeClass('field-error'); $(".field-error").removeClass('field-error');
$("[data-field='"+json.field+"']").addClass('field-error') $("[data-field='"+json.field+"']").addClass('field-error')
...@@ -97,7 +97,7 @@ ...@@ -97,7 +97,7 @@
<p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> <p class="message-copy">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div> </div>
<div role="alert" class="status message submission-error"> <div role="alert" class="status message submission-error" tabindex="-1">
<h3 class="message-title">The following errors occured while processing your registration: </h3> <h3 class="message-title">The following errors occured while processing your registration: </h3>
<ul class="message-copy"> </ul> <ul class="message-copy"> </ul>
</div> </div>
......
lms/templates/seq_module.html
...@@ -16,7 +16,7 @@ ...@@ -16,7 +16,7 @@
data-id="${item['id']}" data-id="${item['id']}"
data-element="${idx+1}" data-element="${idx+1}"
href="javascript:void(0);"> href="javascript:void(0);">
<p>${item['title']}</p> <p class="sr">${item['title']}, ${item['type']}</p>
</a> </a>
</li> </li>
% endfor % endfor
......
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