Skip to content

E
edx-platform
Commit e44ca91b by Chris Rodriguez Committed by Andy Armstrong
Options

Small accessibility fixes for cohorts

parent 4f99657b
Showing with 27 additions and 20 deletions
lms/static/js/groups/views/cohort_editor.js
......@@ -44,9 +44,11 @@ var edx = edx || {};
tabName = tabElement.data('tab');
event.preventDefault();
this.$('.wrapper-tabs .tab').removeClass('is-selected');
this.$('.wrapper-tabs .tab').find('span.sr').remove();
tabElement.addClass('is-selected');
tabElement.find('a').prepend('<span class="sr">' + gettext('Selected tab') + ' </span>');
this.$('.tab-content').addClass('is-hidden');
this.$('.tab-content-' + tabName).removeClass('is-hidden');
this.$('.tab-content-' + tabName).removeClass('is-hidden').focus();
},
saveSettings: function(event) {
......
lms/static/js/groups/views/cohort_form.js
......@@ -7,9 +7,7 @@ var edx = edx || {};
edx.groups.CohortFormView = Backbone.View.extend({
events : {
'change .cohort-management-details-association-course input': 'onRadioButtonChange',
'click .tab-content-settings .action-save': 'saveSettings',
'submit .cohort-management-group-add-form': 'addStudents'
'change .cohort-management-details-association-course input': 'onRadioButtonChange'
},
initialize: function(options) {
......@@ -24,8 +22,8 @@ var edx = edx || {};
this.notification = new NotificationView({
model: model
});
this.notification.render();
beforeElement.before(this.notification.$el);
this.notification.render();
},
removeNotification: function() {
......
lms/static/js/groups/views/cohorts.js
......@@ -102,6 +102,7 @@ var edx = edx || {};
this.removeNotification();
if (this.editor) {
this.editor.setCohort(cohort);
$('.cohort-management-group .group-header-title').focus();
} else {
this.editor = new CohortEditorView({
el: this.$('.cohort-management-group'),
......@@ -111,6 +112,7 @@ var edx = edx || {};
context: this.context
});
this.editor.render();
$('.cohort-management-group .group-header-title').focus();
}
},
......@@ -120,11 +122,13 @@ var edx = edx || {};
this.notification = new NotificationView({
model: model
});
this.notification.render();
if (!beforeElement) {
beforeElement = this.$('.cohort-management-group');
}
beforeElement.before(this.notification.$el);
this.notification.render();
},
removeNotification: function() {
......@@ -149,6 +153,7 @@ var edx = edx || {};
});
this.cohortFormView.render();
this.$('.cohort-management-add-form').append(this.cohortFormView.$el);
this.cohortFormView.$('.cohort-name').focus();
this.setCohortEditorVisibility(false);
},
......@@ -228,6 +233,7 @@ var edx = edx || {};
});
}
}).render();
this.$('#file-upload-form-file').focus();
}
},
......
lms/static/js/views/notification.js
......@@ -18,6 +18,7 @@
actionClass: this.model.get("actionClass"),
actionIconClass: this.model.get("actionIconClass")
}));
this.$('.message').focus();
return this;
},
......
lms/templates/instructor/instructor_dashboard_2/cohort-editor.underscore
<section class="cohort-management-settings has-tabs">
<header class="cohort-management-group-header">
<h3 class="group-header-title">
<h3 class="group-header-title" tabindex="-1">
<span class="title-value"><%- cohort.get('name') %></span>
<span class="group-count"><%-
interpolate(
......@@ -29,11 +29,11 @@
</header>
<ul class="wrapper-tabs">
<li class="tab tab-manage_students is-selected" data-tab="manage_students"><a href="#"><%- gettext("Manage Students") %></a></li>
<li class="tab tab-manage_students is-selected" data-tab="manage_students"><a href="#"><span class="sr"><%- gettext('Selected tab') %> </span><%- gettext("Manage Students") %></a></li>
<li class="tab tab-settings" data-tab="settings"><a href="#"><%- gettext("Settings") %></a></li>
</ul>
<div class="cohort-management-group-add tab-content tab-content-manage_students">
<div class="cohort-management-group-add tab-content tab-content-manage_students" tabindex="-1">
<form action="" method="post" id="cohort-management-group-add-form" class="cohort-management-group-add-form">
<h4 class="form-title"><%- gettext('Add students to this cohort') %></h4>
......@@ -42,8 +42,8 @@
<p><%- gettext('Note: Students can be in only one cohort. Adding students to this group overrides any previous group assignment.') %></p>
</div>
<div class="cohort-confirmations"></div>
<div class="cohort-errors"></div>
<div class="cohort-confirmations" aria-live="polite" tabindex="-1"></div>
<div class="cohort-errors" aria-live="polite" tabindex="-1"></div>
<div class="form-fields">
<div class="field field-textarea is-required">
......@@ -53,9 +53,10 @@
</label>
<textarea name="cohort-management-group-add-students" id="cohort-management-group-add-students"
class="input cohort-management-group-add-students"
placeholder="<%- gettext('e.g. johndoe@example.com, JaneDoe, joeydoe@example.com') %>"></textarea>
placeholder="<%- gettext('e.g. johndoe@example.com, JaneDoe, joeydoe@example.com') %>"
aria-describedby="email-notification-tip"></textarea>
<span class="tip"><%- gettext('You will not receive notification for emails that bounce, so double-check your spelling.') %></span>
<span class="tip" id="email-notification-tip"><%- gettext('You will not receive notification for emails that bounce, so double-check your spelling.') %></span>
</div>
</div>
......@@ -67,6 +68,6 @@
</form>
</div>
<div class="cohort-management-details tab-content tab-content-settings is-hidden">
<div class="cohort-management-details tab-content tab-content-settings is-hidden" tabindex="-1">
</div>
</section>
lms/templates/instructor/instructor_dashboard_2/cohorts.underscore
......@@ -8,9 +8,8 @@
<form action="" method="post" name="" id="cohort-management-nav-form" class="cohort-management-nav-form">
<div class="cohort-management-nav-form-select field field-select">
<label for="cohort-select" class="label sr"><%- gettext("Select a cohort to manage") %></label>
<select class="input cohort-select" name="cohort-select" id="cohort-select">
</select>
<label for="cohort-select" class="label sr"><%- gettext("Select a cohort group to manage") %></label>
<select class="input cohort-select" name="cohort-select" id="cohort-select"></select>
</div>
<div class="form-actions">
......@@ -19,7 +18,7 @@
</form>
<a href="" class="action-primary action-create">
<i class="icon fa fa-plus"></i>
<i class="icon fa fa-plus" aria-hidden="true"></i>
<%- gettext('Add Cohort') %>
</a>
</div>
......@@ -40,7 +39,7 @@
<div class="cohort-management-supplemental">
<p class="">
<i class="icon fa fa-info-circle"></i>
<i class="icon fa fa-info-circle" aria-hidden="true"></i>
<%= interpolate(
gettext('To review student cohort assignments or see the results of uploading a CSV file, download course profile information or cohort results on %(link_start)s the Data Download page. %(link_end)s'),
{link_start: '<a href="" class="link-cross-reference" data-section="data_download">', link_end: '</a>'},
......
lms/templates/instructor/instructor_dashboard_2/notification.underscore
<div class="message message-<%= type %>">
<div class="message message-<%= type %>" tabindex="-1">
<h3 class="message-title">
<%- title %>
</h3>
......
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