ylqjgm
/
canvas-lms
mirror of https://github.com/instructure/canvas-lms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[A11y] set focus on cutoff score in message students dialog 

fixes CNVS-25741

When an instructor "Messages students who…" and selects an
option for which a cutoff score is appropriate, we set
focus on the new 'cutoff' score field. Additionally, a
label has been added to make the field more accessible.

Test plan:

 0. In gradebook, using keyboard only navigation and
    screenreader software…
 1. Tab to the column of an assignment.
 2. Press [esc] to get out of edit mode.
 3. Press [m] to open the assignment menu.
 4. Select "Message students who…"
 5. Select either "Scored less than" or "Scored more than"
    from the menu.
 6. Verify that focus is set on the cutoff score input.

Change-Id: Ide0663ef21002866e1f683390b07316f316ec42a
Reviewed-on: https://gerrit.instructure.com/68820
Tested-by: Jenkins
Reviewed-by: Keith T. Garner <kgarner@instructure.com>
QA-Review: Amber Taniuchi <amber@instructure.com>
Product-Review: Dana Danger <dana@instructure.com>
This commit is contained in:
Strand McCutchen 2015-12-11 15:06:40 -08:00
parent 897989be07
commit 06fe9c9665
2 changed files with 28 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
app/views/shared/_message_students.html.erb
View File

@ -13,8 +13,10 @@
<select class="message_types" aria-label="<%= t(:message_type, "Message Type") %>">
</select>
<span class="cutoff_holder">
<input type="text" class="cutoff_score" style="width: 35px;"/>
<span class="out_of"> <%= t('out_of_points', 'out of %{points_possible}', :points_possible => '<span class="points_possible">&nbsp;</span>'.html_safe) %></span>
<input type="text" class="cutoff_score" style="width: 35px;" aria-label="<%= t("cutoff score") %>"/>
<span class="out_of">
<%= t('out_of_points', 'out of %{points_possible}', :points_possible => '<span class="points_possible">&nbsp;</span>'.html_safe) %>
</span>
</span>
</div>
<ul class="student_list">

34
public/javascripts/message_students.js
View File

@ -95,13 +95,8 @@ define([
modal: true
}).dialog('open').dialog('option', 'title', I18n.t("message_student", "Message Students for %{course_name}", {course_name: title}));
};
$(document).ready(function() {
$message_students_dialog.find(".cutoff_score").bind('change blur keyup', function() {
$message_students_dialog.find("select").change();
});
$message_students_dialog.find(".cancel_button").click(function() {
$message_students_dialog.dialog('close');
});
$("#message_assignment_recipients").formSubmit({
processData: function(data) {
var ids = [];
@ -124,8 +119,9 @@ define([
$(this).find(".button-container button").attr('disabled', false).filter(".send_button").text(I18n.t("buttons.send_message_failed", "Sending Message Failed, please try again"));
}
});
$message_students_dialog.find("select").change(function() {
var idx = parseInt($(this).val(), 10) || 0;
var showStudentsMessageSentTo = function() {
var idx = parseInt($message_students_dialog.find("select").val(), 10) || 0;
var option = currentSettings.options[idx];
var students_hash = $message_students_dialog.data('students_hash'),
cutoff = parseFloat($message_students_dialog.find(".cutoff_score").val(), 10);
@ -163,8 +159,26 @@ define([
for(var idx in students_hash) {
students_hash[idx].showIf(student_ids_hash[idx]);
}
checkSendable();
});
};
var focusOnCutoffScore = function() {
var idx = parseInt($message_students_dialog.find("select").val(), 10) || 0;
var option = currentSettings.options[idx];
if (option.cutoff) {
$(".cutoff_score").focus();
}
};
var closeDialog = function() {
$message_students_dialog.dialog('close');
};
$message_students_dialog.find(".cancel_button").click(closeDialog);
$message_students_dialog.find("select").change(showStudentsMessageSentTo)
.change(focusOnCutoffScore)
.change(checkSendable);
$message_students_dialog.find(".cutoff_score").bind('change blur keyup', showStudentsMessageSentTo)
.bind('change blur keyup', checkSendable);
$message_students_dialog.find("#body").bind('change blur keyup', checkSendable);
});