Skip to content
Snippets Groups Projects
Commit 9188f968 authored by Peter Fogg's avatar Peter Fogg
Browse files

Accessibility fixes for the course home page. 

ECOM-3799
parent 8ab50177
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lms/static/js/courseware/toggle_element_visibility.js
+ 6
− 2
View file @ 9188f968
......@@ -9,14 +9,18 @@
var toggleActionElements = $('.toggle-visibility-button');
var updateToggleActionText = function (elementIsHidden, actionElement) {
var show_text = actionElement.data('show');
var hide_text = actionElement.data('hide');
var show_text = actionElement.data('show'),
hide_text = actionElement.data('hide'),
first_hidden_update = $('.old-updates .toggle-visibility-button').first();
actionElement.attr('aria-expanded', elementIsHidden);
if (elementIsHidden) {
if (hide_text) {
actionElement.html(actionElement.data('hide'));
} else {
actionElement.hide();
first_hidden_update.focus();
}
} else {
if (show_text) {
......
lms/static/sass/course/_info.scss
+ 13
− 1
View file @ 9188f968
......@@ -82,6 +82,13 @@ div.info-wrapper {
display: block;
text-align: center;
cursor: pointer;
background: none;
&:hover, &:focus {
background-color: unset;
color: $m-blue-d3;
border: 1px solid black;
}
}
> li,article {
......@@ -109,7 +116,12 @@ div.info-wrapper {
.toggle-visibility-button {
@extend %t-title9;
@include float(right);
padding: 0;
cursor: pointer;
background: none;
border: none;
color: $blue;
font-weight: normal;
}
.toggle-visibility-element {
......@@ -175,7 +187,7 @@ div.info-wrapper {
right: auto;
}
h1 {
.handouts-header {
@include text-align(left);
@extend %t-strong;
@extend %t-title6;
......
lms/static/sass/course/base/_extends.scss
+ 15
− 32
View file @ 9188f968
......@@ -67,8 +67,7 @@ h1.top-header {
width: flex-grid(3);
background: $sidebar-color;
h1, h2 {
font-size: em(20);
h1, h2, h3, h4 {
font-weight: bold;
letter-spacing: 0;
text-transform: none;
......@@ -79,7 +78,19 @@ h1.top-header {
h1 {
font-size: 18px;
padding: 32px 26px 20px 26px;
margin-bottom: 15px;
}
h2 {
font-size: 16px;
}
h3 {
font-size: 14px;
}
h4 {
font-size: 12px;
}
a {
......@@ -95,40 +106,12 @@ h1.top-header {
display: none;
}
h3 {
background: none;
border: none;
color: $black;
font-weight: normal;
margin: 0;
overflow: hidden;
font-size: 1em;
a {
display: block;
text-decoration: none;
@include transition(none);
}
&.active {
// @extend .bottom-border;
color: $black;
font-weight: bold;
a {
color: $black;
}
}
}
ul, ol {
list-style: none;
margin: 0;
padding-left: 0;
li {
// @extend .bottom-border;
@extend .clearfix;
@include margin-left(20px);
background: none;
position: relative;
padding: 0;
......
lms/templates/courseware/course_updates.html
+ 33
− 12
View file @ 9188f968
......@@ -4,26 +4,47 @@
% for index, update in enumerate(visible_updates):
<article class="updates-article">
% if not update.get("is_error"):
<h2 class="date">${update.get("date")}</h2>
<a class="toggle-visibility-button" data-hide="${_('Hide')}" data-show="${_('Show')}"></a>
<h2 class="date" id="msg-date-${index}">${update.get("date")}</h2>
<button
class="toggle-visibility-button"
data-hide="${_('Hide')}"
data-show="${_('Show')}"
aria-describedby="msg-date-${index}"
aria-controls="msg-content-${index}"
aria-expanded="true"
></button>
% endif
<div class="toggle-visibility-element article-content ${'hidden' if index >= 1 else ''}">
<div class="toggle-visibility-element article-content ${'hidden' if index >= 1 else ''}" id="msg-content-${index}">
${update.get("content")}
</div>
</article>
% endfor
</div>
<div class="old-updates hidden toggle-visibility-element">
% for update in hidden_updates:
% if len(hidden_updates) > 0:
<button
class="toggle-visibility-button show-older-updates"
data-hide=""
data-show="${_('Show Earlier Course Updates')}"
aria-expanded="false"
aria-controls="old-updates"
></button>
% endif
<div class="old-updates hidden toggle-visibility-element" id="old-updates">
% for index, update in enumerate(hidden_updates):
<article class="updates-article">
<h2 class="date">${update.get("date")}</h2>
<a class="toggle-visibility-button" data-hide="${_('Hide')}" data-show="${_('Show')}"></a>
<div class="toggle-visibility-element article-content hidden">${update.get("content")}</div>
<h2 class="date" id="msg-date-${index + len(visible_updates)}">${update.get("date")}</h2>
<button
class="toggle-visibility-button"
data-hide="${_('Hide')}"
data-show="${_('Show')}"
aria-describedby="msg-date-${index + len(visible_updates)}"
aria-controls="msg-content-${index + len(visible_updates)}"
aria-expanded="false"
></button>
<div class="toggle-visibility-element article-content hidden" id="msg-content-${index + len(visible_updates)}">${update.get("content")}</div>
</article>
% endfor
</div>
% if len(hidden_updates) > 0:
<a class="toggle-visibility-button show-older-updates" data-hide="" data-show="${_('Show Earlier Course Updates')}"></a>
% endif
</section>
lms/templates/courseware/info.html
+ 4
− 10
View file @ 9188f968
......@@ -49,12 +49,6 @@ from openedx.core.djangolib.markup import Text, HTML
% if show_coursetalk_widget:
<script src="//d3q6qq2zt8nhwv.cloudfront.net/s/js/widgets/coursetalk-write-reviews.js"></script>
% endif
<script type="text/javascript" src="${static.url('js/jquery.treeview.js')}"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$(".handouts").treeview({collapsed:true, unique:true/*, cookieId: "treeview-book-nav", persist: "cookie"*/});
});
</script>
</%block>
<%block name="bodyclass">view-in-course view-course-info ${course.css_class or ''}</%block>
......@@ -93,20 +87,20 @@ from openedx.core.djangolib.markup import Text, HTML
</section>
<section aria-label="${_('Handout Navigation')}" class="handouts">
% if SelfPacedConfiguration.current().enable_course_home_improvements:
<h1>${_("Important Course Dates")}</h1>
<h1 class="handouts-header">${_("Important Course Dates")}</h1>
${HTML(get_course_date_summary(course, user))}
% endif
<h1>${_(course.info_sidebar_name)}</h1>
<h1 class="handouts-header">${_(course.info_sidebar_name)}</h1>
${HTML(get_course_info_section(request, masquerade_user, course, 'handouts'))}
</section>
% else:
<section class="updates">
<h1>${_("Course Updates and News")}</h1>
<h1 class="handouts-header">${_("Course Updates and News")}</h1>
${HTML(get_course_info_section(request, masquerade_user, course, 'guest_updates'))}
</section>
<section aria-label="${_('Handout Navigation')}" class="handouts">
<h1>${_("Course Handouts")}</h1>
<h1 class="handouts-header">${_("Course Handouts")}</h1>
${HTML(get_course_info_section(request, masquerade_user, course, 'guest_handouts'))}
</section>
% endif
......
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