Fixed keyboard focus remains within modal simulated dialogs.
ECOM-4188 ECOM-5303
This commit is contained in:
Waheed Ahmed
@@ -1272,6 +1272,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',
|
||||
|
||||
73
lms/static/js/dialog_tab_controls.js
Normal file
73
lms/static/js/dialog_tab_controls.js
Normal file
@@ -0,0 +1,73 @@
|
||||
var DialogTabControls = (function() {
|
||||
'use strict';
|
||||
|
||||
var focusableChildren,
|
||||
numElements,
|
||||
currentIndex,
|
||||
focusableElementSelectors = 'a, input[type=text], input[type=submit], select, textarea, button',
|
||||
setCurrentIndex = function(currentElement) {
|
||||
var elementIndex = focusableChildren.index(currentElement);
|
||||
if (elementIndex >= 0) {
|
||||
currentIndex = elementIndex;
|
||||
}
|
||||
},
|
||||
initializeTabKeyValues = function(elementName, $closeButton) {
|
||||
focusableChildren = $(elementName).find(focusableElementSelectors);
|
||||
if ($closeButton) {
|
||||
focusableChildren = focusableChildren.add($closeButton);
|
||||
}
|
||||
numElements = focusableChildren.length;
|
||||
currentIndex = 0;
|
||||
focusableChildren[currentIndex].focus();
|
||||
focusableChildren.on('click', function() {
|
||||
setCurrentIndex(this);
|
||||
});
|
||||
},
|
||||
focusElement = function() {
|
||||
var focusableElement = focusableChildren[currentIndex];
|
||||
if (focusableElement) {
|
||||
focusableElement.focus();
|
||||
}
|
||||
},
|
||||
focusPrevious = function() {
|
||||
currentIndex--;
|
||||
if (currentIndex < 0) {
|
||||
currentIndex = numElements - 1;
|
||||
}
|
||||
|
||||
focusElement();
|
||||
},
|
||||
focusNext = function() {
|
||||
currentIndex++;
|
||||
if (currentIndex >= numElements) {
|
||||
currentIndex = 0;
|
||||
}
|
||||
|
||||
focusElement();
|
||||
},
|
||||
setKeydownListener = function($element, $closeButton) {
|
||||
$element.on('keydown', function(e) {
|
||||
var keyCode = e.keyCode || e.which,
|
||||
escapeKeyCode = 27,
|
||||
tabKeyCode = 9;
|
||||
if (keyCode === escapeKeyCode) {
|
||||
e.preventDefault();
|
||||
if ($closeButton) {
|
||||
$closeButton.click();
|
||||
}
|
||||
}
|
||||
if (keyCode === tabKeyCode && e.shiftKey) {
|
||||
e.preventDefault();
|
||||
focusPrevious();
|
||||
} else if (keyCode === tabKeyCode) {
|
||||
e.preventDefault();
|
||||
focusNext();
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
initializeTabKeyValues: initializeTabKeyValues,
|
||||
setKeydownListener: setKeydownListener
|
||||
};
|
||||
}());
|
||||
@@ -561,6 +561,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();
|
||||
|
||||
@@ -380,7 +380,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) $base-font-color;
|
||||
$lighter-base-font-color: rgb(100,100,100) !default;
|
||||
$very-light-text: rgb(255,255,255) !default;
|
||||
$text-color: rgb(51, 51, 51) !default;
|
||||
|
||||
|
||||
@@ -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.setKeydownListener($(debugModalSelector), leanOverlaySelector);
|
||||
DialogTabControls.setKeydownListener($(historyModalSelector), leanOverlaySelector);
|
||||
DialogTabControls.setKeydownListener($(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){
|
||||
|
||||
@@ -18,107 +18,9 @@ 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" aria-label="${_("{platform_name} Help").format(platform_name=static.get_platform_name())}">
|
||||
<div class="inner-wrapper" id="help_wrapper">
|
||||
<section id="help-modal" class="modal" aria-hidden="true" role="dialog" tabindex="-1" aria-label="${_("{platform_name} Support").format(platform_name=static.get_platform_name())}">
|
||||
<div class="inner-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">
|
||||
@@ -126,99 +28,181 @@ from xmodule.tabs import CourseTabList
|
||||
${_('Close')}
|
||||
</span>
|
||||
</button>
|
||||
<div id="help_wrapper">
|
||||
|
||||
<header>
|
||||
<h2>${_('Thank You!')}</h2>
|
||||
<hr>
|
||||
</header>
|
||||
<header>
|
||||
<h2>
|
||||
${Text(_('{platform_name} Support')).format(
|
||||
platform_name=HTML(u'<span class="edx">{}</span>').format(static.get_platform_name())
|
||||
)}
|
||||
</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"
|
||||
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
|
||||
%>
|
||||
<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>
|
||||
|
||||
% 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>
|
||||
</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");
|
||||
$(document).ready(function() {
|
||||
var $helpModal = $("#help-modal"),
|
||||
$closeButton = $("#help-modal .close-modal"),
|
||||
$leanOverlay = $("#lean_overlay"),
|
||||
$feedbackForm = $("#feedback_form"),
|
||||
onModalClose = function() {
|
||||
$closeButton.off("click");
|
||||
$leanOverlay.off("click");
|
||||
$helpModal.attr("aria-hidden", "true");
|
||||
$('area,input,select,textarea,button').removeAttr('tabindex');
|
||||
$(".help-tab a").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();
|
||||
}
|
||||
});
|
||||
$leanOverlay.removeAttr('tabindex');
|
||||
};
|
||||
|
||||
DialogTabControls.setKeydownListener($helpModal, $closeButton);
|
||||
|
||||
$(".help-tab").click(function() {
|
||||
$helpModal.css("position", "absolute");
|
||||
DialogTabControls.initializeTabKeyValues("#help_wrapper", $closeButton);
|
||||
$(".field-error").removeClass("field-error");
|
||||
$("#feedback_form")[0].reset();
|
||||
$feedbackForm[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");
|
||||
$("#help-modal").attr("aria-hidden", "false");
|
||||
$("#help-modal .close-modal").click(onModalClose);
|
||||
$("#lean_overlay").click(onModalClose);
|
||||
$("#help_wrapper .close-modal").focus();
|
||||
$helpModal.attr("aria-hidden", "false");
|
||||
$closeButton.click(onModalClose);
|
||||
$leanOverlay.click(onModalClose);
|
||||
$("button.close-modal").attr('tabindex', 0);
|
||||
$closeButton.focus();
|
||||
});
|
||||
|
||||
showFeedback = function(event, issue_type, title, subject_label, details_label) {
|
||||
$("#help_wrapper").css("display", "none");
|
||||
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>");
|
||||
$("#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();
|
||||
$closeButton.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", "padding-bottom": "5px"});
|
||||
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}{begin_span}Include error messages, steps which lead to the issue, etc.{end_span}')).format(
|
||||
"${Text(_('Details of the problem you are encountering{asterisk}')).format(
|
||||
asterisk='*',
|
||||
begin_span=HTML('<span class=tip>'),
|
||||
end_span=HTML('</span>'),
|
||||
) | n, js_escaped_string}"
|
||||
);
|
||||
});
|
||||
@@ -240,20 +224,20 @@ from xmodule.tabs import CourseTabList
|
||||
"${_('Details') + '*' | n, js_escaped_string}"
|
||||
);
|
||||
});
|
||||
$("#feedback_form").submit(function() {
|
||||
$feedbackForm.submit(function() {
|
||||
$("input[type='submit']", this).attr("disabled", "disabled");
|
||||
$('area,input,select,textarea,button').attr('tabindex', -1);
|
||||
$("#feedback_form_wrapper .close-modal").focus();
|
||||
$closeButton.focus();
|
||||
});
|
||||
$("#feedback_form").on("ajax:complete", function() {
|
||||
$feedbackForm.on("ajax:complete", function() {
|
||||
$("input[type='submit']", this).removeAttr("disabled");
|
||||
});
|
||||
$("#feedback_form").on("ajax:success", function(event, data, status, xhr) {
|
||||
$feedbackForm.on("ajax:success", function(event, data, status, xhr) {
|
||||
$("#feedback_form_wrapper").css("display", "none");
|
||||
$("#feedback_success_wrapper").css("display", "block");
|
||||
$("#feedback_success_wrapper").focus();
|
||||
DialogTabControls.initializeTabKeyValues("#feedback_success_wrapper", $closeButton);
|
||||
$closeButton.focus();
|
||||
});
|
||||
$("#feedback_form").on("ajax:error", function(event, xhr, status, error) {
|
||||
$feedbackForm.on("ajax:error", function(event, xhr, status, error) {
|
||||
$(".field-error").removeClass("field-error").removeAttr("aria-invalid");
|
||||
var responseData;
|
||||
try {
|
||||
@@ -290,7 +274,7 @@ from xmodule.tabs import CourseTabList
|
||||
// Make change explicit to assistive technology
|
||||
$("#feedback_error").focus();
|
||||
});
|
||||
})(this)
|
||||
});
|
||||
</script>
|
||||
|
||||
%endif
|
||||
|
||||
@@ -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"):') + ' '} </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>
|
||||
|
||||
Reference in New Issue
Block a user