Skip to content

E
edx-platform
Commit 8a522b89 by Waheed Ahmed Committed by GitHub
Options

Merge pull request #13245 from edx/waheed/ecom-4188-fix-focus-on-tab-remain-within-modal 

Fixed keyboard focus remains within modal simulated dialogs.
parents e86ff28f 3c84b7a1
Showing with 192 additions and 154 deletions
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) $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;
......
lms/templates/help_modal.html
......@@ -18,207 +18,245 @@ from xmodule.tabs import CourseTabList
<a href="#help-modal" rel="leanModal" role="button">${_("Help")}</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} Help").format(platform_name=static.get_platform_name())}">
<div class="inner-wrapper">
## TODO: find a way to refactor this
<button class="close-modal "tabindex="0">
<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>
<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>
${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
%>
<%
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
% 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 {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>
<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>
<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>
<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>
<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>
<div id="feedback_form_wrapper">
<header></header>
<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>
<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 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">
## 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>
<div id="feedback_success_wrapper">
<header>
<h2>${_('Thank You!')}</h2>
<hr>
</header>
<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="feedback-faq-link" tabindex="0">').format(marketing_link('FAQ')),
link_end=HTML('</a>')
)}
</p>
<%
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");
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");
$('area,input,select,textarea,button').removeAttr('tabindex');
$(".help-tab a").focus();
$leanOverlay.removeAttr('tabindex');
},
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();
}
});
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();
}
});
$helpModal.click(function () {
$helpModal.focus();
});
$(".help-tab").click(function() {
initializeTabKeyValues("#help_wrapper");
$(".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");
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);
$("#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");
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 +278,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();
initializeTabKeyValues("#feedback_success_wrapper");
$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 {
......
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