Small accessibility fixes for cohorts
This commit is contained in:
Chris Rodriguez
committed by
Andy Armstrong
Andy Armstrong
parent
4f99657b6d
commit
e44ca91b2a
@@ -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) {
|
||||
|
||||
@@ -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() {
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
actionClass: this.model.get("actionClass"),
|
||||
actionIconClass: this.model.get("actionIconClass")
|
||||
}));
|
||||
this.$('.message').focus();
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<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>
|
||||
|
||||
@@ -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>'},
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<div class="message message-<%= type %>">
|
||||
<div class="message message-<%= type %>" tabindex="-1">
|
||||
<h3 class="message-title">
|
||||
<%- title %>
|
||||
</h3>
|
||||
|
||||
Reference in New Issue
Block a user