Fixed focus should remain within the simulated dialogs.

ECOM-5303

lms/envs/common.py

@@ -1278,6 +1278,7 @@ 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',

lms/static/js/dialog_tab_controls.js

+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
+    };
+}());

lms/static/sass/course/courseware/_courseware.scss

@@ -557,6 +557,14 @@ 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();

lms/templates/courseware/xqa_interface.html

@@ -5,11 +5,19 @@
 <script type="text/javascript">
 
 function setup_debug(element_id, edit_link, staff_context){
-    $('#' + element_id + '_trig').leanModal();
-    $('#' + element_id + '_xqa_log').leanModal();
+    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 + '_xqa_form').submit(function () {sendlog(element_id, edit_link, staff_context);});
 
-    $("#" + element_id + "_history_trig").leanModal();
+    historyTrigger.leanModal();
 
     $('#' + element_id + '_history_form').submit(
         function () {
@@ -21,6 +29,31 @@ 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){

lms/templates/help_modal.html

@@ -148,14 +148,11 @@ from xmodule.tabs import CourseTabList
 </section>
 
 <script type="text/javascript">
-(function() {
+$(document).ready(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");
@@ -163,64 +160,16 @@ from xmodule.tabs import CourseTabList
             $('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;
         };
 
-        $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();
-            }
-        });
+    DialogTabControls.setKeydownListner($helpModal, $closeButton);
 
     $helpModal.click(function () {
         $helpModal.focus();
     });
 
     $(".help-tab").click(function() {
-        initializeTabKeyValues("#help_wrapper");
+        DialogTabControls.initializeTabKeyValues("#help_wrapper", $closeButton);
         $(".field-error").removeClass("field-error");
         $feedbackForm[0].reset();
         $("#feedback_form input[type='submit']").removeAttr("disabled");
@@ -238,7 +187,7 @@ from xmodule.tabs import CourseTabList
 
     showFeedback = function(event, issue_type, title, subject_label, details_label) {
         $("#help_wrapper").css("display", "none");
-        initializeTabKeyValues("#feedback_form_wrapper");
+        DialogTabControls.initializeTabKeyValues("#feedback_form_wrapper", $closeButton);
         $("#feedback_form input[name='issue_type']").val(issue_type);
         $("#feedback_form_wrapper").css("display", "block");
         $("#feedback_form_wrapper header").html("<h2>" + title + "</h2><hr>");
@@ -288,7 +237,7 @@ from xmodule.tabs import CourseTabList
     $feedbackForm.on("ajax:success", function(event, data, status, xhr) {
         $("#feedback_form_wrapper").css("display", "none");
         $("#feedback_success_wrapper").css("display", "block");
-        initializeTabKeyValues("#feedback_success_wrapper");
+        DialogTabControls.initializeTabKeyValues("#feedback_success_wrapper", $closeButton);
         $closeButton.focus();
     });
     $feedbackForm.on("ajax:error", function(event, xhr, status, error) {
@@ -328,7 +277,7 @@ from xmodule.tabs import CourseTabList
         // Make change explicit to assistive technology
         $("#feedback_error").focus();
     });
-})(this)
+});
 </script>
 
 %endif

lms/templates/staff_problem_info.html

@@ -31,7 +31,7 @@ ${block_content}
 </div>
 %  endif
 
-<section aria-hidden="true" id="${element_id}_xqa-modal" class="modal xqa-modal" style="width:80%; left:20%; height:80%; overflow:auto" >
+<section aria-hidden="true" role="dialog" tabindex="-1" id="${element_id}_xqa-modal" class="modal xqa-modal">
   <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 id="${element_id}_xqa_entry" type="text" placeholder="${_('comment')}">
+      <input tabindex="0" 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" 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">
+<section aria-hidden="true" role="dialog" tabindex="-1" class="modal staff-modal" id="${element_id}_debug" >
+  <div class="inner-wrapper">
     <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" id="sd_fu_${location.name | h}" placeholder="${user.username}"/>
+        <input type="text" tabindex="0" 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" class="modal history-modal" id="${element_id}_history" style="width:80%; left:20%; height:80%; overflow:auto;" >
-  <div class="inner-wrapper" style="color:black">
+<section aria-hidden="true" role="dialog" tabindex="-1" class="modal history-modal" id="${element_id}_history">
+  <div class="inner-wrapper">
     <header>
       <h2>${_("Submission History Viewer")}</h2>
     </header>
     <form id="${element_id}_history_form">
       <label for="${element_id}_history_student_username">${_("User:")}</label>
-      <input id="${element_id}_history_student_username" type="text" placeholder=""/>
+      <input tabindex="0" 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>