From 9147051e7a5354eda5ae1ccf963c05ba013c8680 Mon Sep 17 00:00:00 2001
From: Xavier Antoviaque <xavier@antoviaque.org>
Date: Mon, 9 Sep 2013 11:49:26 -0300
Subject: [PATCH] accessibility: Focus on error messages in Help modal
 (LMS-584)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

> To make this change explicit to assistive technology, focus should be
> moved programmatically to this div after it has been made visible. To
> allow the div to be focused via scripting (without adding it to the
> regular focus order that keyboard users cycle through), a tabindex=”-1”
> should be added.

> In addition, the invalid fields should be given a an
> aria-invalid="true" attribute.
---
 lms/templates/help_modal.html | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/lms/templates/help_modal.html b/lms/templates/help_modal.html
index a0a0eca9c3..0e9c7c24f5 100644
--- a/lms/templates/help_modal.html
+++ b/lms/templates/help_modal.html
@@ -60,7 +60,7 @@ discussion_link = get_discussion_link(course) if course else None
     <header></header>
 
     <form id="feedback_form" class="feedback_form" method="post" data-remote="true" action="/submit_feedback">
-      <div id="feedback_error" class="modal-form-error"></div>
+      <div id="feedback_error" class="modal-form-error" tabindex="-1"></div>
 % if not user.is_authenticated():
       <label data-field="name">${_('Name*')}</label>
       <input name="name" type="text">
@@ -88,7 +88,7 @@ discussion_link = get_discussion_link(course) if course else None
     </div>
   </div>
 
-  <div class="inner-wrapper" id="feedback_success_wrapper">
+  <div class="inner-wrapper" id="feedback_success_wrapper" tabindex="-1">
     <header>
       <h2>${_('Thank You!')}</h2>
       <hr>
@@ -182,16 +182,17 @@ discussion_link = get_discussion_link(course) if course else None
     $("#feedback_form").on("ajax:success", function(event, data, status, xhr) {
         $("#feedback_form_wrapper").css("display", "none");
         $("#feedback_success_wrapper").css("display", "block");
+        $("#feedback_success_wrapper").focus();
     });
     $("#feedback_form").on("ajax:error", function(event, xhr, status, error) {
-        $(".field-error").removeClass("field-error");
+        $(".field-error").removeClass("field-error").removeAttr("aria-invalid");
         var responseData;
         try {
             responseData = jQuery.parseJSON(xhr.responseText);
         } catch(err) {
         }
         if (responseData) {
-            $("[data-field='"+responseData.field+"']").addClass("field-error");
+            $("[data-field='"+responseData.field+"']").addClass("field-error").attr("aria-invalid", "true");
             $("#feedback_error").html(responseData.error).stop().css("display", "block");
         } else {
             // If no data (or malformed data) is returned, a server error occurred
@@ -217,6 +218,8 @@ discussion_link = get_discussion_link(course) if course else None
             });
 %endif
         }
+        // Make change explicit to assistive technology
+        $("#feedback_error").focus();
     });
 })(this)
 </script>