From aee5af533273fb92e997cacfe89576871919511b Mon Sep 17 00:00:00 2001
From: Xavier Antoviaque <xavier@antoviaque.org>
Date: Mon, 9 Sep 2013 17:49:50 -0300
Subject: [PATCH] accessibility: Manage keyboard focus on help modal dialog
 (LMS-581)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Modal dialogs should manage keyboard focus, ensuring that users can't
tab out of the modal dialog and back into the page itself (effectively
moving “behind” the dimmed modal). On the last focusable element of the
dialog, return focus back to the first focusable element.

Also move the close button to the start of the dialog's section, making
it the first focusable URL, to ensure focus matches the visual
representation of the dialog.
---
 lms/templates/help_modal.html | 42 ++++++++++++++++++++++++-----------
 1 file changed, 29 insertions(+), 13 deletions(-)

diff --git a/lms/templates/help_modal.html b/lms/templates/help_modal.html
index 22e7176cc4..3875240696 100644
--- a/lms/templates/help_modal.html
+++ b/lms/templates/help_modal.html
@@ -14,6 +14,9 @@
 
 <section id="help-modal" class="modal" aria-hidden="true">
   <div class="inner-wrapper" id="help_wrapper">
+    ## TODO: find a way to refactor this
+    <a href="#" role="button" class="close-modal" tabindex="0" title="${_('Close Modal')}">&#10005;</a>
+
     <header>
       <h2>${_('{span_start}{platform_name}{span_end} Help').format(span_start='<span class="edx">', span_end='</span>', platform_name=settings.PLATFORM_NAME)}</h2>
       <hr>
@@ -47,12 +50,11 @@ discussion_link = get_discussion_link(course) if course else None
       <a href="#" id="feedback_link_suggestion">${_('Make a suggestion')}</a>
       <a href="#" id="feedback_link_question">${_('Ask a question')}</a>
     </div>
-
-## TODO: find a way to refactor this
-  <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 
   <div class="inner-wrapper" id="feedback_form_wrapper">
+    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
+
     <header></header>
 
     <form id="feedback_form" class="feedback_form" method="post" data-remote="true" action="/submit_feedback">
@@ -73,14 +75,14 @@ discussion_link = get_discussion_link(course) if course else None
       <input name="course_id" type="hidden" value="${course.id | h}">
 % endif
       <div class="submit">
-        <input name="submit" type="submit" value="Submit">
+        <input name="submit" type="submit" value="Submit" id="feedback_submit">
       </div>
     </form>
-  
-    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 
   <div class="inner-wrapper" id="feedback_success_wrapper" tabindex="-1">
+    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
+
     <header>
       <h2>${_('Thank You!')}</h2>
       <hr>
@@ -104,22 +106,31 @@ discussion_link = get_discussion_link(course) if course else None
     ).format(
         open_time=open_time,
         close_time=close_time,
-        link_start='<a href="{}" target="_blank">'.format(marketing_link('FAQ')),
+        link_start='<a href="{}" target="_blank" id="feedback-faq-link">'.format(marketing_link('FAQ')),
         link_end='</a>'
     )}
     </p>
-
-    <a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
   </div>
 </section>
 
 <script type="text/javascript">
 (function() {
     var onModalClose = function() {
-        $(".help-modal .close-modal").off("click");
-        $("#lean_overlay").off("click");
-        $("#help-modal").attr("aria-hidden", "true");
-    };
+            $(".help-modal .close-modal").off("click");
+            $("#lean_overlay").off("click");
+            $("#help-modal").attr("aria-hidden", "true");
+            $(".help-tab").focus();
+        },
+        cycle_modal_tab = function(from_element_name, to_element_name) {
+            $(from_element_name).on('keydown', function(e) {
+                var keyCode = e.keyCode || e.which;
+                if (keyCode === 9) {
+                    e.preventDefault();
+                    $(to_element_name).focus();
+                }
+            });
+        };
+
     $(".help-tab").click(function() {
         $(".field-error").removeClass("field-error");
         $("#feedback_form")[0].reset();
@@ -131,6 +142,7 @@ discussion_link = get_discussion_link(course) if course else None
         $("#help-modal").attr("aria-hidden", "false");
         $("#help-modal .close-modal").click(onModalClose);
         $("#lean_overlay").click(onModalClose);
+        $("#help_wrapper .close-modal").focus();
     });
     showFeedback = function(event, issue_type, title, subject_label, details_label) {
         $("#help_wrapper").css("display", "none");
@@ -139,8 +151,12 @@ discussion_link = get_discussion_link(course) if course else None
         $("#feedback_form_wrapper header").html("<h2>" + title + "</h2><hr>");
         $("#feedback_form_wrapper label[data-field='subject']").html(subject_label);
         $("#feedback_form_wrapper label[data-field='details']").html(details_label);
+        $("#feedback_form_wrapper .close-modal").focus();
         event.preventDefault();
     };
+    cycle_modal_tab("#feedback_link_question", "#help_wrapper .close-modal");
+    cycle_modal_tab("#feedback_submit", "#feedback_form_wrapper .close-modal");
+    cycle_modal_tab("#feedback_faq_link", "#feedback_success_wrapper .close-modal");
     $("#feedback_link_problem").click(function(event) {
         showFeedback(
             event,