Add a11y title/role to message students dialog

Add the role of "dialog" and an appropriate aria-label to the "message
students" dialog.

fixes GRADE-1580

Test plan:
  - Open Individual Gradebook with VoiceOver or JAWS active
  - Select an assignment
  - Click the "Message students who..." button
  - The dialog that opens should be identified by your screenreader
    software as a dialog, with an appropriate name ("Message Students
    for [course name]")
  - Make sure the dialog still functions as it used to

Change-Id: Ic9be7e82404fe8832fe747ff9256b9240c179f00
Reviewed-on: https://gerrit.instructure.com/166455
Tested-by: Jenkins
Reviewed-by: Jeremy Neander <jneander@instructure.com>
Reviewed-by: Derek Bender <djbender@instructure.com>
Product-Review: Nathan Rogowski <nathan@instructure.com>
QA-Review: Jeremy Neander <jneander@instructure.com>

public/javascripts/message_students.js

@@ -23,10 +23,10 @@ import './jquery.instructure_forms' /* formSubmit */
 import 'jqueryui/dialog'
 import './jquery.instructure_misc_plugins' /* showIf */
 
-  var $message_students_dialog = $("#message_students_dialog");
-  var $sendButton = $message_students_dialog.find(".send_button");
-  var currentSettings = {};
-  var checkSendable = function() {
+  let currentSettings = {}
+
+  function checkSendable() {
+    const $message_students_dialog = messageStudentsDialog()
     disableSend(
       $message_students_dialog.find("#body").val().length == 0 ||
       $message_students_dialog.find(".student:not(.blank):visible").length == 0
@@ -35,6 +35,7 @@ import './jquery.instructure_misc_plugins' /* showIf */
 
   /*global messageStudents*/
   window.messageStudents = function(settings) {
+    const $message_students_dialog = messageStudentsDialog()
     currentSettings = settings;
     $message_students_dialog.find(".message_types").empty();
     for(var idx=0, l=settings.options.length; idx < l; idx++) {
@@ -82,6 +83,8 @@ import './jquery.instructure_misc_plugins' /* showIf */
 
     $ul.show();
 
+    const dialogTitle = I18n.t('message_student', 'Message Students for %{course_name}', {course_name: title})
+
     $message_students_dialog.data('students_hash', students_hash),
     $message_students_dialog.find(".asset_title").text(title);
     $message_students_dialog.find(".out_of").showIf(settings.points_possible != null);
@@ -94,14 +97,25 @@ import './jquery.instructure_misc_plugins' /* showIf */
     $message_students_dialog.find("select").change();
     $message_students_dialog.dialog({
       width: 600,
-      modal: true
+      modal: true,
+      open: (_event, _ui) => {
+        $message_students_dialog.closest('.ui-dialog')
+          .attr('role', 'dialog')
+          .attr('aria-label', dialogTitle)
+      },
+      close: (_event, _ui) => {
+        $message_students_dialog.closest('.ui-dialog')
+          .removeAttr('role')
+          .removeAttr('aria-label')
+      }
     })
     .dialog('open')
-    .dialog('option', 'title', I18n.t('message_student', 'Message Students for %{course_name}', {course_name: title}))
+    .dialog('option', 'title', dialogTitle)
     .on('dialogclose', settings.onClose);
   };
 
   $(document).ready(function() {
+    const $message_students_dialog = messageStudentsDialog()
     $message_students_dialog.find("button").click(function(e) {
       var btn = $(e.target);
       if (btn.hasClass("disabled")) {
@@ -189,7 +203,7 @@ import './jquery.instructure_misc_plugins' /* showIf */
 
   function disableButtons(disabled, buttons) {
     if (buttons == null) {
-      buttons = $message_students_dialog.find("button");
+      buttons = messageStudentsDialog().find("button");
     }
     buttons
       .toggleClass("disabled", disabled)
@@ -197,7 +211,11 @@ import './jquery.instructure_misc_plugins' /* showIf */
   }
 
   function disableSend(disabled) {
-    disableButtons(disabled, $sendButton);
+    disableButtons(disabled, messageStudentsDialog().find(".send_button"));
+  }
+
+  function messageStudentsDialog() {
+    return $('#message_students_dialog')
   }
 
 export default messageStudents;

spec/javascripts/message_studentsSpec.js

@@ -0,0 +1,80 @@
+/*
+ * Copyright (C) 2018 - present Instructure, Inc.
+ *
+ * This file is part of Canvas.
+ *
+ * Canvas is free software: you can redistribute it and/or modify it under
+ * the terms of the GNU Affero General Public License as published by the Free
+ * Software Foundation, version 3 of the License.
+ *
+ * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
+ * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
+ * details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along
+ * with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import $ from 'jquery'
+import fakeENV from 'helpers/fakeENV'
+import messageStudents from 'message_students'
+
+QUnit.module('MessageStudents dialog', hooks => {
+  let fixtures
+  const settings = {
+    context_code: 'Z',
+    options: [],
+    points_possible: 0,
+    students: [],
+    title: 'My Great Course!!!'
+  }
+
+  hooks.beforeEach(() => {
+    fixtures = $('#fixtures')
+    fixtures.append(`
+      <div id="message_students_dialog">
+        <form id="message_assignment_recipients">
+          <span id="message_students_dialog_label"></span>
+          <div id="body">
+            <select class="message_types"></select>
+          </div>
+
+          <div class="button-container">
+            <button class="Button cancel_button">Cancel</button>
+            <button class="Button Button--primary send_button">Send Message</button>
+          </div>
+        </form>
+      </div>
+    `)
+  })
+
+  hooks.afterEach(() => {
+    fakeENV.teardown()
+    fixtures.empty()
+    $('.ui-dialog').remove()
+    $('#message_students_dialog').remove()
+  })
+
+  test('sets the role of the containing dialog to "dialog" when opened', () => {
+    messageStudents(settings)
+    strictEqual($('.ui-dialog').attr('role'), 'dialog')
+  })
+
+  test('sets the content of the dialog label to the dialog title when opened', () => {
+    messageStudents(settings)
+    strictEqual($('.ui-dialog').attr('aria-label'), 'Message Students for My Great Course!!!')
+  })
+
+  test('removes the role of the containing dialog when closed', () => {
+    messageStudents(settings)
+    $('#message_students_dialog').dialog('close')
+    strictEqual($('.ui-dialog').attr('role'), undefined)
+  })
+
+  test('clears the content of the dialog label when closed', () => {
+    messageStudents(settings)
+    $('#message_students_dialog').dialog('close')
+    strictEqual($('.ui-dialog').attr('aria-label'), undefined)
+  })
+})