Skip to content

E
edx-platform
Commit a7660259 by Waheed Ahmed Committed by GitHub
Options

Merge pull request #13315 from edx/waheed/ecom-5303-fix-focus-remain-within-modals 

Fixed focus should remain within the simulated dialogs.
parents 3b9ac3de ae849406
Showing with 126 additions and 68 deletions
lms/envs/common.py
...@@ -1278,6 +1278,7 @@ base_application_js = [ ...@@ -1278,6 +1278,7 @@ base_application_js = [
'js/src/utility.js', 'js/src/utility.js',
'js/src/logger.js', 'js/src/logger.js',
'js/my_courses_dropdown.js', 'js/my_courses_dropdown.js',
'js/dialog_tab_controls.js',
'js/src/string_utils.js', 'js/src/string_utils.js',
'js/form.ext.js', 'js/form.ext.js',
'js/src/ie_shim.js', 'js/src/ie_shim.js',
......
lms/static/js/dialog_tab_controls.js 0 → 100644
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 { ...@@ -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 { div.staff_info {
display: none; display: none;
@include clearfix(); @include clearfix();
......
lms/templates/courseware/xqa_interface.html
...@@ -5,11 +5,19 @@ ...@@ -5,11 +5,19 @@
<script type="text/javascript"> <script type="text/javascript">
function setup_debug(element_id, edit_link, staff_context){ function setup_debug(element_id, edit_link, staff_context){
$('#' + element_id + '_trig').leanModal(); var staffDebugTrigger = $('#' + element_id + '_trig'),
$('#' + element_id + '_xqa_log').leanModal(); 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 + '_xqa_form').submit(function () {sendlog(element_id, edit_link, staff_context);});
$("#" + element_id + "_history_trig").leanModal(); historyTrigger.leanModal();
$('#' + element_id + '_history_form').submit( $('#' + element_id + '_history_form').submit(
function () { function () {
...@@ -21,6 +29,31 @@ function setup_debug(element_id, edit_link, staff_context){ ...@@ -21,6 +29,31 @@ function setup_debug(element_id, edit_link, staff_context){
return false; 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){ function sendlog(element_id, edit_link, staff_context){
......
lms/templates/help_modal.html
...@@ -148,14 +148,11 @@ from xmodule.tabs import CourseTabList ...@@ -148,14 +148,11 @@ from xmodule.tabs import CourseTabList
</section> </section>
<script type="text/javascript"> <script type="text/javascript">
(function() { $(document).ready(function() {
var $helpModal = $("#help-modal"), var $helpModal = $("#help-modal"),
$closeButton = $("#help-modal .close-modal"), $closeButton = $("#help-modal .close-modal"),
$leanOverlay = $("#lean_overlay"), $leanOverlay = $("#lean_overlay"),
$feedbackForm = $("#feedback_form"), $feedbackForm = $("#feedback_form"),
focusableChildren,
numElements,
currentIndex,
onModalClose = function() { onModalClose = function() {
$closeButton.off("click"); $closeButton.off("click");
$leanOverlay.off("click"); $leanOverlay.off("click");
...@@ -163,64 +160,16 @@ from xmodule.tabs import CourseTabList ...@@ -163,64 +160,16 @@ from xmodule.tabs import CourseTabList
$('area,input,select,textarea,button').removeAttr('tabindex'); $('area,input,select,textarea,button').removeAttr('tabindex');
$(".help-tab a").focus(); $(".help-tab a").focus();
$leanOverlay.removeAttr('tabindex'); $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) { DialogTabControls.setKeydownListner($helpModal, $closeButton);
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.click(function () {
$helpModal.focus(); $helpModal.focus();
}); });
$(".help-tab").click(function() { $(".help-tab").click(function() {
initializeTabKeyValues("#help_wrapper"); DialogTabControls.initializeTabKeyValues("#help_wrapper", $closeButton);
$(".field-error").removeClass("field-error"); $(".field-error").removeClass("field-error");
$feedbackForm[0].reset(); $feedbackForm[0].reset();
$("#feedback_form input[type='submit']").removeAttr("disabled"); $("#feedback_form input[type='submit']").removeAttr("disabled");
...@@ -238,7 +187,7 @@ from xmodule.tabs import CourseTabList ...@@ -238,7 +187,7 @@ from xmodule.tabs import CourseTabList
showFeedback = function(event, issue_type, title, subject_label, details_label) { showFeedback = function(event, issue_type, title, subject_label, details_label) {
$("#help_wrapper").css("display", "none"); $("#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 input[name='issue_type']").val(issue_type);
$("#feedback_form_wrapper").css("display", "block"); $("#feedback_form_wrapper").css("display", "block");
$("#feedback_form_wrapper header").html("<h2>" + title + "</h2><hr>"); $("#feedback_form_wrapper header").html("<h2>" + title + "</h2><hr>");
...@@ -288,7 +237,7 @@ from xmodule.tabs import CourseTabList ...@@ -288,7 +237,7 @@ from xmodule.tabs import CourseTabList
$feedbackForm.on("ajax:success", function(event, data, status, xhr) { $feedbackForm.on("ajax:success", function(event, data, status, xhr) {
$("#feedback_form_wrapper").css("display", "none"); $("#feedback_form_wrapper").css("display", "none");
$("#feedback_success_wrapper").css("display", "block"); $("#feedback_success_wrapper").css("display", "block");
initializeTabKeyValues("#feedback_success_wrapper"); DialogTabControls.initializeTabKeyValues("#feedback_success_wrapper", $closeButton);
$closeButton.focus(); $closeButton.focus();
}); });
$feedbackForm.on("ajax:error", function(event, xhr, status, error) { $feedbackForm.on("ajax:error", function(event, xhr, status, error) {
...@@ -328,7 +277,7 @@ from xmodule.tabs import CourseTabList ...@@ -328,7 +277,7 @@ from xmodule.tabs import CourseTabList
// Make change explicit to assistive technology // Make change explicit to assistive technology
$("#feedback_error").focus(); $("#feedback_error").focus();
}); });
})(this) });
</script> </script>
%endif %endif
lms/templates/staff_problem_info.html
...@@ -31,7 +31,7 @@ ${block_content} ...@@ -31,7 +31,7 @@ ${block_content}
</div> </div>
% endif % 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"> <div class="inner-wrapper">
<header> <header>
<h2>${_("{platform_name} Content Quality Assessment").format(platform_name=settings.PLATFORM_NAME)}</h2> <h2>${_("{platform_name} Content Quality Assessment").format(platform_name=settings.PLATFORM_NAME)}</h2>
...@@ -39,7 +39,7 @@ ${block_content} ...@@ -39,7 +39,7 @@ ${block_content}
<form id="${element_id}_xqa_form" class="xqa_form"> <form id="${element_id}_xqa_form" class="xqa_form">
<label for="${element_id}_xqa_entry">${_("Comment")}</label> <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> <label for="${element_id}_xqa_tag">${_("Tag")}</label>
<span style="color:black;vertical-align: -10pt">${_('Optional tag (eg "done" or "broken"):') + '&nbsp; '} </span> <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"> <input id="${element_id}_xqa_tag" type="text" placeholder="${_('tag')}" style="width:80px;display:inline">
...@@ -53,8 +53,8 @@ ${block_content} ...@@ -53,8 +53,8 @@ ${block_content}
</div> </div>
</section> </section>
<section aria-hidden="true" class="modal staff-modal" id="${element_id}_debug" style="width:80%; left:20%; height:80%; overflow:auto; display:none" > <section aria-hidden="true" role="dialog" tabindex="-1" class="modal staff-modal" id="${element_id}_debug" >
<div class="inner-wrapper" style="color:black"> <div class="inner-wrapper">
<header> <header>
<h2>${_('Staff Debug')}</h2> <h2>${_('Staff Debug')}</h2>
</header> </header>
...@@ -64,7 +64,7 @@ ${block_content} ...@@ -64,7 +64,7 @@ ${block_content}
<h3>${_('Actions')}</h3> <h3>${_('Actions')}</h3>
<div> <div>
<label for="sd_fu_${location.name | h}">${_('Username')}:</label> <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>
<div data-location="${location | h}" data-location-name="${location.name | h}"> <div data-location="${location | h}" data-location-name="${location.name | h}">
[ [
...@@ -108,14 +108,14 @@ category = ${category | h} ...@@ -108,14 +108,14 @@ category = ${category | h}
</div> </div>
</section> </section>
<section aria-hidden="true" class="modal history-modal" id="${element_id}_history" style="width:80%; left:20%; height:80%; overflow:auto;" > <section aria-hidden="true" role="dialog" tabindex="-1" class="modal history-modal" id="${element_id}_history">
<div class="inner-wrapper" style="color:black"> <div class="inner-wrapper">
<header> <header>
<h2>${_("Submission History Viewer")}</h2> <h2>${_("Submission History Viewer")}</h2>
</header> </header>
<form id="${element_id}_history_form"> <form id="${element_id}_history_form">
<label for="${element_id}_history_student_username">${_("User:")}</label> <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}"/> <input type="hidden" id="${element_id}_history_location" value="${location | h}"/>
<div class="submit"> <div class="submit">
<button name="submit" type="submit">${_("View History")}</button> <button name="submit" type="submit">${_("View History")}</button>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment