From 9804f73e366760fff8fac8e863b65ce04958aed0 Mon Sep 17 00:00:00 2001
From: cahrens <christina@edx.org>
Date: Thu, 15 Sep 2016 16:40:23 -0400
Subject: [PATCH 1/2] Revert "Fixed focus should remain within the simulated
 dialogs."

This reverts commit ae849406bf5d59a29dbb5f78ea07a7b54529a303.
---
 lms/envs/common.py                            |  1 -
 lms/static/js/dialog_tab_controls.js          | 67 -------------------
 .../sass/course/courseware/_courseware.scss   |  8 ---
 lms/templates/courseware/xqa_interface.html   | 39 +----------
 lms/templates/help_modal.html                 | 63 +++++++++++++++--
 lms/templates/staff_problem_info.html         | 16 ++---
 6 files changed, 68 insertions(+), 126 deletions(-)
 delete mode 100644 lms/static/js/dialog_tab_controls.js

diff --git a/lms/envs/common.py b/lms/envs/common.py
index 94c01207ac..f70d2d4d24 100644
--- a/lms/envs/common.py
+++ b/lms/envs/common.py
@@ -1278,7 +1278,6 @@ base_application_js = [
     'js/src/utility.js',
     'js/src/logger.js',
     'js/my_courses_dropdown.js',
-    'js/dialog_tab_controls.js',
     'js/src/string_utils.js',
     'js/form.ext.js',
     'js/src/ie_shim.js',
diff --git a/lms/static/js/dialog_tab_controls.js b/lms/static/js/dialog_tab_controls.js
deleted file mode 100644
index e46bac80cd..0000000000
--- a/lms/static/js/dialog_tab_controls.js
+++ /dev/null
@@ -1,67 +0,0 @@
-var DialogTabControls = (function() {
-    'use strict';
-
-    var focusableChildren,
-        numElements,
-        currentIndex,
-        initializeTabKeyValues = function(elementName, $closeButton) {
-            focusableChildren = $(elementName).find(
-                'a, input[type=text], input[type=submit], select, textarea, button'
-            );
-            if ($closeButton) {
-                focusableChildren = focusableChildren.add($closeButton);
-            }
-            numElements = focusableChildren.length;
-            currentIndex = 0;
-            focusableChildren[currentIndex].focus();
-        },
-        focusElement = function() {
-            var focusableElement = focusableChildren[currentIndex];
-            if (focusableElement) {
-                focusableElement.focus();
-            }
-        },
-        focusPrevious = function() {
-            currentIndex--;
-            if (currentIndex < 0) {
-                currentIndex = numElements - 1;
-            }
-
-            focusElement();
-
-            return false;
-        },
-        focusNext = function() {
-            currentIndex++;
-            if (currentIndex >= numElements) {
-                currentIndex = 0;
-            }
-
-            focusElement();
-
-            return false;
-        },
-        setKeydownListner = function($modal, $closeButton) {
-            $modal.on('keydown', function(e) {
-                var keyCode = e.keyCode || e.which,
-                    escapeKeyCode = 27,
-                    tabKeyCode = 9;
-                if (keyCode === escapeKeyCode) {
-                    e.preventDefault();
-                    $closeButton.click();
-                }
-                if (keyCode === tabKeyCode && e.shiftKey) {
-                    e.preventDefault();
-                    focusPrevious();
-                } else if (keyCode === tabKeyCode) {
-                    e.preventDefault();
-                    focusNext();
-                }
-            });
-        };
-
-    return {
-        initializeTabKeyValues: initializeTabKeyValues,
-        setKeydownListner: setKeydownListner
-    };
-}());
diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss
index 6b6b61d9ae..e0461ca2c6 100644
--- a/lms/static/sass/course/courseware/_courseware.scss
+++ b/lms/static/sass/course/courseware/_courseware.scss
@@ -561,14 +561,6 @@ html.video-fullscreen {
       }
     }
 
-    section.xqa-modal, section.staff-modal, section.history-modal {
-        width: 80%;
-        height: 80%;
-        left: left(20%);
-        overflow: auto;
-        display: none;
-    }
-
     div.staff_info {
       display: none;
       @include clearfix();
diff --git a/lms/templates/courseware/xqa_interface.html b/lms/templates/courseware/xqa_interface.html
index eb550cbfc7..6fc5d8db15 100644
--- a/lms/templates/courseware/xqa_interface.html
+++ b/lms/templates/courseware/xqa_interface.html
@@ -5,19 +5,11 @@
 <script type="text/javascript">
 
 function setup_debug(element_id, edit_link, staff_context){
-    var staffDebugTrigger = $('#' + element_id + '_trig'),
-        xqaLogTrigger = $('#' + element_id + '_xqa_log'),
-        historyTrigger = $("#" + element_id + "_history_trig"),
-        debugModalSelector = '#' + element_id + '_debug',
-        historyModalSelector = '#' + element_id + '_history',
-        xqaModalSelector = '#' + element_id + '_xqa-modal',
-        leanOverlaySelector = $('#lean_overlay');
-
-    staffDebugTrigger.leanModal();
-    xqaLogTrigger.leanModal();
+    $('#' + element_id + '_trig').leanModal();
+    $('#' + element_id + '_xqa_log').leanModal();
     $('#' + element_id + '_xqa_form').submit(function () {sendlog(element_id, edit_link, staff_context);});
 
-    historyTrigger.leanModal();
+    $("#" + element_id + "_history_trig").leanModal();
 
     $('#' + element_id + '_history_form').submit(
         function () {
@@ -29,31 +21,6 @@ function setup_debug(element_id, edit_link, staff_context){
             return false;
         }
     );
-
-    DialogTabControls.setKeydownListner($(debugModalSelector), leanOverlaySelector);
-    DialogTabControls.setKeydownListner($(historyModalSelector), leanOverlaySelector);
-    DialogTabControls.setKeydownListner($(xqaModalSelector), leanOverlaySelector);
-
-    staffDebugTrigger.on('click', function() {
-        DialogTabControls.initializeTabKeyValues(debugModalSelector);
-        $(debugModalSelector).attr("aria-hidden", "false");
-    });
-
-    historyTrigger.on('click', function() {
-        DialogTabControls.initializeTabKeyValues(historyModalSelector);
-        $(historyModalSelector).attr("aria-hidden", "false");
-    });
-
-    xqaLogTrigger.on('click', function() {
-        DialogTabControls.initializeTabKeyValues(xqaModalSelector);
-        $(xqaModalSelector).attr("aria-hidden", "false");
-    });
-
-    leanOverlaySelector.click(function () {
-        $(xqaModalSelector).attr("aria-hidden", "true");
-        $(historyModalSelector).attr("aria-hidden", "true");
-        $(debugModalSelector).attr("aria-hidden", "true");
-      })
 }
 
 function sendlog(element_id, edit_link, staff_context){
diff --git a/lms/templates/help_modal.html b/lms/templates/help_modal.html
index 7d9744e29e..9089a367ed 100644
--- a/lms/templates/help_modal.html
+++ b/lms/templates/help_modal.html
@@ -148,11 +148,14 @@ from xmodule.tabs import CourseTabList
 </section>
 
 <script type="text/javascript">
-$(document).ready(function() {
+(function() {
     var $helpModal = $("#help-modal"),
         $closeButton = $("#help-modal .close-modal"),
         $leanOverlay = $("#lean_overlay"),
         $feedbackForm = $("#feedback_form"),
+        focusableChildren,
+        numElements,
+        currentIndex,
         onModalClose = function() {
             $closeButton.off("click");
             $leanOverlay.off("click");
@@ -160,16 +163,64 @@ $(document).ready(function() {
             $('area,input,select,textarea,button').removeAttr('tabindex');
             $(".help-tab a").focus();
             $leanOverlay.removeAttr('tabindex');
+        },
+        initializeTabKeyValues = function(element_name) {
+            focusableChildren = $(element_name).find('a, input[type=text], input[type=submit], select, textarea, button');
+            focusableChildren = focusableChildren.add($closeButton);
+            numElements = focusableChildren.length;
+            currentIndex = 0;
+        },
+        focusElement = function() {
+            var focusableElement = focusableChildren[currentIndex];
+            if (focusableElement) {
+                focusableElement.focus();
+            }
+        },
+        focusPrevious = function () {
+            currentIndex--;
+            if (currentIndex < 0) {
+                currentIndex = numElements - 1;
+            }
+
+            focusElement();
+
+            return false;
+        },
+        focusNext = function () {
+            currentIndex++;
+            if (currentIndex >= numElements) {
+                currentIndex = 0;
+            }
+
+            focusElement();
+
+            return false;
         };
 
-    DialogTabControls.setKeydownListner($helpModal, $closeButton);
+        $helpModal.on('keydown', function (e) {
+            var keyCode = e.keyCode || e.which,
+                escapeKeyCode = 27,
+                tabKeyCode = 9;
+            if (keyCode === escapeKeyCode) {
+                e.preventDefault();
+                $closeButton.click();
+            }
+            if (keyCode == tabKeyCode && e.shiftKey) {
+                e.preventDefault();
+                focusPrevious();
+            }
+            else if (keyCode == tabKeyCode) {
+                e.preventDefault();
+                focusNext();
+            }
+        });
 
     $helpModal.click(function () {
         $helpModal.focus();
     });
 
     $(".help-tab").click(function() {
-        DialogTabControls.initializeTabKeyValues("#help_wrapper", $closeButton);
+        initializeTabKeyValues("#help_wrapper");
         $(".field-error").removeClass("field-error");
         $feedbackForm[0].reset();
         $("#feedback_form input[type='submit']").removeAttr("disabled");
@@ -187,7 +238,7 @@ $(document).ready(function() {
 
     showFeedback = function(event, issue_type, title, subject_label, details_label) {
         $("#help_wrapper").css("display", "none");
-        DialogTabControls.initializeTabKeyValues("#feedback_form_wrapper", $closeButton);
+        initializeTabKeyValues("#feedback_form_wrapper");
         $("#feedback_form input[name='issue_type']").val(issue_type);
         $("#feedback_form_wrapper").css("display", "block");
         $("#feedback_form_wrapper header").html("<h2>" + title + "</h2><hr>");
@@ -237,7 +288,7 @@ $(document).ready(function() {
     $feedbackForm.on("ajax:success", function(event, data, status, xhr) {
         $("#feedback_form_wrapper").css("display", "none");
         $("#feedback_success_wrapper").css("display", "block");
-        DialogTabControls.initializeTabKeyValues("#feedback_success_wrapper", $closeButton);
+        initializeTabKeyValues("#feedback_success_wrapper");
         $closeButton.focus();
     });
     $feedbackForm.on("ajax:error", function(event, xhr, status, error) {
@@ -277,7 +328,7 @@ $(document).ready(function() {
         // Make change explicit to assistive technology
         $("#feedback_error").focus();
     });
-});
+})(this)
 </script>
 
 %endif
diff --git a/lms/templates/staff_problem_info.html b/lms/templates/staff_problem_info.html
index 82d4cb1b0c..8038a15e2d 100644
--- a/lms/templates/staff_problem_info.html
+++ b/lms/templates/staff_problem_info.html
@@ -31,7 +31,7 @@ ${block_content}
 </div>
 %  endif
 
-<section aria-hidden="true" role="dialog" tabindex="-1" id="${element_id}_xqa-modal" class="modal xqa-modal">
+<section aria-hidden="true" id="${element_id}_xqa-modal" class="modal xqa-modal" style="width:80%; left:20%; height:80%; overflow:auto" >
   <div class="inner-wrapper">
     <header>
       <h2>${_("{platform_name} Content Quality Assessment").format(platform_name=settings.PLATFORM_NAME)}</h2>
@@ -39,7 +39,7 @@ ${block_content}
 
     <form id="${element_id}_xqa_form" class="xqa_form">
       <label for="${element_id}_xqa_entry">${_("Comment")}</label>
-      <input tabindex="0" id="${element_id}_xqa_entry" type="text" placeholder="${_('comment')}">
+      <input id="${element_id}_xqa_entry" type="text" placeholder="${_('comment')}">
       <label for="${element_id}_xqa_tag">${_("Tag")}</label>
       <span style="color:black;vertical-align: -10pt">${_('Optional tag (eg "done" or "broken"):') + '&nbsp; '}      </span>
       <input id="${element_id}_xqa_tag" type="text" placeholder="${_('tag')}" style="width:80px;display:inline">
@@ -53,8 +53,8 @@ ${block_content}
   </div>
 </section>
 
-<section aria-hidden="true" role="dialog" tabindex="-1" class="modal staff-modal" id="${element_id}_debug" >
-  <div class="inner-wrapper">
+<section aria-hidden="true" class="modal staff-modal" id="${element_id}_debug" style="width:80%; left:20%; height:80%; overflow:auto; display:none" >
+  <div class="inner-wrapper" style="color:black">
     <header>
       <h2>${_('Staff Debug')}</h2>
     </header>
@@ -64,7 +64,7 @@ ${block_content}
       <h3>${_('Actions')}</h3>
       <div>
         <label for="sd_fu_${location.name | h}">${_('Username')}:</label>
-        <input type="text" tabindex="0" id="sd_fu_${location.name | h}" placeholder="${user.username}"/>
+        <input type="text" id="sd_fu_${location.name | h}" placeholder="${user.username}"/>
       </div>
       <div data-location="${location | h}" data-location-name="${location.name | h}">
         [
@@ -108,14 +108,14 @@ category = ${category | h}
   </div>
 </section>
 
-<section aria-hidden="true" role="dialog" tabindex="-1" class="modal history-modal" id="${element_id}_history">
-  <div class="inner-wrapper">
+<section aria-hidden="true" class="modal history-modal" id="${element_id}_history" style="width:80%; left:20%; height:80%; overflow:auto;" >
+  <div class="inner-wrapper" style="color:black">
     <header>
       <h2>${_("Submission History Viewer")}</h2>
     </header>
     <form id="${element_id}_history_form">
       <label for="${element_id}_history_student_username">${_("User:")}</label>
-      <input tabindex="0" id="${element_id}_history_student_username" type="text" placeholder=""/>
+      <input id="${element_id}_history_student_username" type="text" placeholder=""/>
       <input type="hidden" id="${element_id}_history_location" value="${location | h}"/>
       <div class="submit">
         <button name="submit" type="submit">${_("View History")}</button>

From a249e8e18c091b3e32458cd40e1089ea5e22bbb8 Mon Sep 17 00:00:00 2001
From: cahrens <christina@edx.org>
Date: Thu, 15 Sep 2016 16:40:49 -0400
Subject: [PATCH 2/2] Revert "Fixed keyboard focus remains within modal
 simulated dialogs."

This reverts commit 3c84b7a12cc42a7a59861068ac33fdf39de66ab1.
---
 lms/static/sass/partials/base/_variables.scss |   2 +-
 lms/templates/help_modal.html                 | 362 ++++++++----------
 2 files changed, 163 insertions(+), 201 deletions(-)

diff --git a/lms/static/sass/partials/base/_variables.scss b/lms/static/sass/partials/base/_variables.scss
index 4d9d7b8734..097cc44d93 100644
--- a/lms/static/sass/partials/base/_variables.scss
+++ b/lms/static/sass/partials/base/_variables.scss
@@ -372,7 +372,7 @@ $body-line-height: golden-ratio(.875em, 1) !default;
 $base-font-color: rgb(60,60,60) !default;
 $baseFontColor: $base-font-color;
 
-$lighter-base-font-color: rgb(100,100,100) !default;
+$lighter-base-font-color: rgb(100,100,100) $base-font-color;
 $very-light-text: rgb(255,255,255) !default;
 $text-color: rgb(51, 51, 51) !default;
 
diff --git a/lms/templates/help_modal.html b/lms/templates/help_modal.html
index 9089a367ed..9c4e5dca37 100644
--- a/lms/templates/help_modal.html
+++ b/lms/templates/help_modal.html
@@ -18,9 +18,107 @@ from xmodule.tabs import CourseTabList
   <a href="#help-modal" rel="leanModal" role="button">${_("Support")}</a>
 </div>
 
-<section id="help-modal" class="modal" aria-hidden="true" role="dialog" tabindex="-1" aria-label="${_("{platform_name} Help").format(platform_name=static.get_platform_name())}">
-  <div class="inner-wrapper">
+<section id="help-modal" class="modal" aria-hidden="true" role="dialog" aria-label="${_("{platform_name} Help").format(platform_name=static.get_platform_name())}">
+  <div class="inner-wrapper" id="help_wrapper">
     ## TODO: find a way to refactor this
+    <button class="close-modal "tabindex="0">
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
+      <span class="sr">
+        ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
+        ${_('Close')}
+      </span>
+    </button>
+
+    <header>
+      <h2>
+	${Text(_('{platform_name} Help')).format(
+	    platform_name=HTML(u'<span class="edx">{}</span>').format(static.get_platform_name())
+	)}
+      </h2>
+      <hr>
+    </header>
+
+<%
+  discussion_tab = CourseTabList.get_discussion(course) if course else None
+  discussion_link = discussion_tab.link_func(course, reverse) if (discussion_tab and discussion_tab.is_enabled(course, user=user)) else None
+%>
+
+% if discussion_link:
+    <p>${Text(_('For {strong_start}questions on course lectures, homework, tools, or materials for this course{strong_end}, post in the {link_start}course discussion forum{link_end}.')).format(
+      strong_start=HTML('<strong>'),
+      strong_end=HTML('</strong>'),
+      link_start=HTML('<a href="{url}" target="_blank">').format(
+        url=discussion_link
+      ),
+      link_end=HTML('</a>'),
+      )}
+    </p>
+% endif
+
+    <p>${Text(_('Have {strong_start}general questions about {platform_name}{strong_end}? You can find lots of helpful information in the {platform_name} {link_start}FAQ{link_end}.')).format(
+        strong_start=HTML('<strong>'),
+        strong_end=HTML('</strong>'),
+        link_start=HTML('<a href="{url}" target="_blank">').format(
+          url=marketing_link('FAQ')
+        ),
+        link_end=HTML('</a>'),
+        platform_name=static.get_platform_name())}
+      </p>
+
+    <p>${Text(_('Have a {strong_start}question about something specific{strong_end}? You can contact the {platform_name} general support team directly:')).format(
+        strong_start=HTML('<strong>'),
+        strong_end=HTML('</strong>'),
+        platform_name=static.get_platform_name()
+      )}</p>
+    <hr>
+
+    <div class="help-buttons">
+      <button type="button" class="" id="feedback_link_problem">${_('Report a problem')}</button><br />
+      <button type="button" class="" id="feedback_link_suggestion">${_('Make a suggestion')}</button><br />
+      <button type="button" class="" id="feedback_link_question">${_('Ask a question')}</button>
+    </div>
+
+    <p class="note">${_('Please note: The {platform_name} support team is English speaking. While we will do our best to address your inquiry in any language, our responses will be in English.').format(
+        platform_name=static.get_platform_name()
+      )}</p>
+
+  </div>
+
+  <div class="inner-wrapper" id="feedback_form_wrapper">
+    <button class="close-modal">
+      <span class="icon fa fa-remove" aria-hidden="true"></span>
+      <span class="sr">
+        ## Translators: this is a control to allow users to exit out of this modal interface (a menu or piece of UI that takes the full focus of the screen)
+        ${_('Close')}
+      </span>
+    </button>
+
+    <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" tabindex="-1"></div>
+% if not user.is_authenticated():
+      <label data-field="name" for="feedback_form_name">${_('Name')}*</label>
+      <input name="name" type="text" id="feedback_form_name" aria-required="true">
+      <label data-field="email" for="feedback_form_email">${_('E-mail')}*</label>
+      <input name="email" type="text" id="feedback_form_email" aria-required="true">
+% endif
+      <label data-field="subject" for="feedback_form_subject">${_('Briefly describe your issue')}*</label>
+      <input name="subject" type="text" id="feedback_form_subject" aria-required="true">
+      <label data-field="details" for="feedback_form_details">${_('Tell us the details')}*
+<span class="tip">${_('Include error messages, steps which lead to the issue, etc')}</span></label>
+      <textarea name="details" id="feedback_form_details" aria-required="true"></textarea>
+      <input name="issue_type" type="hidden">
+% if course:
+      <input name="course_id" type="hidden" value="${unicode(course.id)}">
+% endif
+      <div class="submit">
+        <input name="submit" type="submit" value="${_('Submit')}" id="feedback_submit">
+      </div>
+    </form>
+  </div>
+
+  <div class="inner-wrapper" id="feedback_success_wrapper" tabindex="0">
     <button class="close-modal" tabindex="0">
       <span class="icon fa fa-remove" aria-hidden="true"></span>
       <span class="sr">
@@ -28,235 +126,99 @@ from xmodule.tabs import CourseTabList
         ${_('Close')}
       </span>
     </button>
-    <div id="help_wrapper">
 
-        <header>
-          <h2>
-        ${Text(_('{platform_name} Help')).format(
-            platform_name=HTML(u'<span class="edx">{}</span>').format(static.get_platform_name())
-        )}
-          </h2>
-          <hr>
-        </header>
+    <header>
+      <h2>${_('Thank You!')}</h2>
+      <hr>
+    </header>
 
     <%
-      discussion_tab = CourseTabList.get_discussion(course) if course else None
-      discussion_link = discussion_tab.link_func(course, reverse) if (discussion_tab and discussion_tab.is_enabled(course, user=user)) else None
+      dst = datetime.now(pytz.utc).astimezone(pytz.timezone("America/New_York")).dst()
+      if dst:
+        open_time = "13:00"
+        close_time = "21:00"
+      else:
+        open_time = "14:00"
+        close_time = "22:00"
     %>
-
-    % if discussion_link:
-        <p>${Text(_('For {strong_start}questions on course lectures, homework, tools, or materials for this course{strong_end}, post in the {link_start}course discussion forum{link_end}.')).format(
-          strong_start=HTML('<strong>'),
-          strong_end=HTML('</strong>'),
-          link_start=HTML('<a href="{url}" target="_blank">').format(
-            url=discussion_link
-          ),
-          link_end=HTML('</a>'),
-          )}
-        </p>
-    % endif
-
-        <p>${Text(_('Have {strong_start}general questions about {platform_name}{strong_end}? You can find lots of helpful information in the {platform_name} {link_start}FAQ{link_end}.')).format(
-            strong_start=HTML('<strong>'),
-            strong_end=HTML('</strong>'),
-            link_start=HTML('<a href="{url}" id="feedback-faq-link" target="_blank">').format(
-              url=marketing_link('FAQ')
-            ),
-            link_end=HTML('</a>'),
-            platform_name=static.get_platform_name())}
-          </p>
-
-        <p>${Text(_('Have a {strong_start}question about something specific{strong_end}? You can contact the {platform_name} general support team directly:')).format(
-            strong_start=HTML('<strong>'),
-            strong_end=HTML('</strong>'),
-            platform_name=static.get_platform_name()
-          )}</p>
-        <hr>
-
-        <div class="help-buttons">
-            <button type="button" class="" id="feedback_link_problem">${_('Report a problem')}</button><br />
-            <button type="button" class="" id="feedback_link_suggestion">${_('Make a suggestion')}</button><br />
-            <button type="button" class="" id="feedback_link_question">${_('Ask a question')}</button>
-        </div>
-
-        <p class="note">${_('Please note: The {platform_name} support team is English speaking. While we will do our best to address your inquiry in any language, our responses will be in English.').format(
-            platform_name=static.get_platform_name()
-        )}</p>
-
-    </div>
-
-    <div id="feedback_form_wrapper">
-
-        <header></header>
-
-        <form id="feedback_form" class="feedback_form" method="post" data-remote="true" action="/submit_feedback">
-          <div class="feedback-form-error" aria-live="polite">
-              <div id="feedback_error" class="modal-form-error" tabindex="-1"></div>
-          </div>
-    % if not user.is_authenticated():
-          <label data-field="name" for="feedback_form_name">${_('Name')}*</label>
-          <input name="name" type="text" id="feedback_form_name" required>
-          <label data-field="email" for="feedback_form_email">${_('E-mail')}*</label>
-          <input name="email" type="text" id="feedback_form_email" required>
-    % endif
-          <label data-field="subject" for="feedback_form_subject">${_('Briefly describe your issue')}*</label>
-          <input name="subject" type="text" id="feedback_form_subject" required>
-          <label data-field="details" for="feedback_form_details">${_('Tell us the details')}*</label>
-          <span class="tip" id="feedback_form_details_tip">${_('Describe what you were doing when you encountered the issue. Include any details that will help us to troubleshoot, including error messages that you saw.')}</span>
-          <textarea name="details" id="feedback_form_details" required aria-describedby="feedback_form_details_tip"></textarea>
-          <input name="issue_type" type="hidden">
-    % if course:
-          <input name="course_id" type="hidden" value="${unicode(course.id)}">
-    % endif
-          <div class="submit">
-            <input name="submit" type="submit" value="${_('Submit')}" id="feedback_submit">
-          </div>
-        </form>
-    </div>
-
-    <div id="feedback_success_wrapper">
-
-        <header>
-          <h2>${_('Thank You!')}</h2>
-          <hr>
-        </header>
-
-        <%
-          dst = datetime.now(pytz.utc).astimezone(pytz.timezone("America/New_York")).dst()
-          if dst:
-            open_time = "13:00"
-            close_time = "21:00"
-          else:
-            open_time = "14:00"
-            close_time = "22:00"
-        %>
-        <p>
-        ${Text(_(
-            'Thank you for your inquiry or feedback.  We typically respond to a request '
-            'within one business day (Monday to Friday, {open_time} UTC to {close_time} UTC.) In the meantime, please '
-            'review our {link_start}detailed FAQs{link_end} where most questions have '
-            'already been answered.'
-        )).format(
-            open_time=open_time,
-            close_time=close_time,
-            link_start=HTML('<a href="{}" target="_blank" id="success-feedback-faq-link">').format(marketing_link('FAQ')),
-            link_end=HTML('</a>')
-        )}
-        </p>
-    </div>
+    <p>
+    ${Text(_(
+        'Thank you for your inquiry or feedback.  We typically respond to a request '
+        'within one business day (Monday to Friday, {open_time} UTC to {close_time} UTC.) In the meantime, please '
+        'review our {link_start}detailed FAQs{link_end} where most questions have '
+        'already been answered.'
+    )).format(
+        open_time=open_time,
+        close_time=close_time,
+        link_start=HTML('<a href="{}" target="_blank" id="feedback-faq-link" tabindex="0">').format(marketing_link('FAQ')),
+        link_end=HTML('</a>')
+    )}
+    </p>
   </div>
 </section>
 
 <script type="text/javascript">
 (function() {
-    var $helpModal = $("#help-modal"),
-        $closeButton = $("#help-modal .close-modal"),
-        $leanOverlay = $("#lean_overlay"),
-        $feedbackForm = $("#feedback_form"),
-        focusableChildren,
-        numElements,
-        currentIndex,
-        onModalClose = function() {
-            $closeButton.off("click");
-            $leanOverlay.off("click");
-            $helpModal.attr("aria-hidden", "true");
+    var onModalClose = function() {
+            $("#help-modal .close-modal").off("click");
+            $("#lean_overlay").off("click");
+            $("#help-modal").attr("aria-hidden", "true");
             $('area,input,select,textarea,button').removeAttr('tabindex');
             $(".help-tab a").focus();
-            $leanOverlay.removeAttr('tabindex');
         },
-        initializeTabKeyValues = function(element_name) {
-            focusableChildren = $(element_name).find('a, input[type=text], input[type=submit], select, textarea, button');
-            focusableChildren = focusableChildren.add($closeButton);
-            numElements = focusableChildren.length;
-            currentIndex = 0;
-        },
-        focusElement = function() {
-            var focusableElement = focusableChildren[currentIndex];
-            if (focusableElement) {
-                focusableElement.focus();
-            }
-        },
-        focusPrevious = function () {
-            currentIndex--;
-            if (currentIndex < 0) {
-                currentIndex = numElements - 1;
-            }
-
-            focusElement();
-
-            return false;
-        },
-        focusNext = function () {
-            currentIndex++;
-            if (currentIndex >= numElements) {
-                currentIndex = 0;
-            }
-
-            focusElement();
-
-            return false;
+        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();
+                }
+            });
         };
 
-        $helpModal.on('keydown', function (e) {
-            var keyCode = e.keyCode || e.which,
-                escapeKeyCode = 27,
-                tabKeyCode = 9;
-            if (keyCode === escapeKeyCode) {
-                e.preventDefault();
-                $closeButton.click();
-            }
-            if (keyCode == tabKeyCode && e.shiftKey) {
-                e.preventDefault();
-                focusPrevious();
-            }
-            else if (keyCode == tabKeyCode) {
-                e.preventDefault();
-                focusNext();
-            }
-        });
-
-    $helpModal.click(function () {
-        $helpModal.focus();
-    });
-
     $(".help-tab").click(function() {
-        initializeTabKeyValues("#help_wrapper");
         $(".field-error").removeClass("field-error");
-        $feedbackForm[0].reset();
+        $("#feedback_form")[0].reset();
         $("#feedback_form input[type='submit']").removeAttr("disabled");
         $("#feedback_form_wrapper").css("display", "none");
         $("#feedback_error").css("display", "none");
-        $("#feedback_form_details_tip").css("display", "none");
         $("#feedback_success_wrapper").css("display", "none");
         $("#help_wrapper").css("display", "block");
-        $helpModal.attr("aria-hidden", "false");
-        $closeButton.click(onModalClose);
-        $leanOverlay.click(onModalClose);
-        $("button.close-modal").attr('tabindex', 0);
-        $closeButton.focus();
+        $("#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");
-        initializeTabKeyValues("#feedback_form_wrapper");
         $("#feedback_form input[name='issue_type']").val(issue_type);
         $("#feedback_form_wrapper").css("display", "block");
         $("#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);
-        $closeButton.focus();
+        $("#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");
+    $("#help-modal").on("keydown", function(e) {
+        var keyCode = e.keyCode || e.which;
+        if (keyCode === 27) {
+            e.preventDefault();
+            $("#help_wrapper .close-modal").click();
+        }
+    });
     $("#feedback_link_problem").click(function(event) {
-        $("#feedback_form_details_tip").css("display", "block");
         showFeedback(
             event,
             "${_('problem') | n, js_escaped_string}",
             "${_('Report a Problem') | n, js_escaped_string}",
             "${_('Brief description of the problem') + '*' | n, js_escaped_string}" ,
-            "${Text(_('Details of the problem you are encountering{asterisk}')).format(
+            "${Text(_('Details of the problem you are encountering{asterisk}{begin_span}Include error messages, steps which lead to the issue, etc.{end_span}')).format(
                 asterisk='*',
+                begin_span=HTML('<span class=tip>'),
+                end_span=HTML('</span>'),
             ) | n, js_escaped_string}"
         );
     });
@@ -278,20 +240,20 @@ from xmodule.tabs import CourseTabList
             "${_('Details') + '*' | n, js_escaped_string}"
         );
     });
-    $feedbackForm.submit(function() {
+    $("#feedback_form").submit(function() {
         $("input[type='submit']", this).attr("disabled", "disabled");
-        $closeButton.focus();
+        $('area,input,select,textarea,button').attr('tabindex', -1);
+        $("#feedback_form_wrapper .close-modal").focus();
     });
-    $feedbackForm.on("ajax:complete", function() {
+    $("#feedback_form").on("ajax:complete", function() {
         $("input[type='submit']", this).removeAttr("disabled");
     });
-    $feedbackForm.on("ajax:success", function(event, data, status, xhr) {
+    $("#feedback_form").on("ajax:success", function(event, data, status, xhr) {
         $("#feedback_form_wrapper").css("display", "none");
         $("#feedback_success_wrapper").css("display", "block");
-        initializeTabKeyValues("#feedback_success_wrapper");
-        $closeButton.focus();
+        $("#feedback_success_wrapper").focus();
     });
-    $feedbackForm.on("ajax:error", function(event, xhr, status, error) {
+    $("#feedback_form").on("ajax:error", function(event, xhr, status, error) {
         $(".field-error").removeClass("field-error").removeAttr("aria-invalid");
         var responseData;
         try {