Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

accessibility: Focus on error messages in Help modal (LMS-584)

Browse Source 
> To make this change explicit to assistive technology, focus should be
> moved programmatically to this div after it has been made visible. To
> allow the div to be focused via scripting (without adding it to the
> regular focus order that keyboard users cycle through), a tabindex=”-1”
> should be added.

> In addition, the invalid fields should be given a an
> aria-invalid="true" attribute.
This commit is contained in:
Xavier Antoviaque
2013-09-09 11:49:26 -03:00
parent f708806118
commit 9147051e7a
1 changed files with 7 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
lms/templates/help_modal.html
View File

@@ -60,7 +60,7 @@ discussion_link = get_discussion_link(course) if course else None
<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"></div>
<div id="feedback_error" class="modal-form-error" tabindex="-1"></div>
% if not user.is_authenticated():
<label data-field="name">${_('Name*')}</label>
<input name="name" type="text">
@@ -88,7 +88,7 @@ discussion_link = get_discussion_link(course) if course else None
</div>
</div>
<div class="inner-wrapper" id="feedback_success_wrapper">
<div class="inner-wrapper" id="feedback_success_wrapper" tabindex="-1">
<header>
<h2>${_('Thank You!')}</h2>
<hr>
@@ -182,16 +182,17 @@ discussion_link = get_discussion_link(course) if course else None
$("#feedback_form").on("ajax:success", function(event, data, status, xhr) {
$("#feedback_form_wrapper").css("display", "none");
$("#feedback_success_wrapper").css("display", "block");
$("#feedback_success_wrapper").focus();
});
$("#feedback_form").on("ajax:error", function(event, xhr, status, error) {
$(".field-error").removeClass("field-error");
$(".field-error").removeClass("field-error").removeAttr("aria-invalid");
var responseData;
try {
responseData = jQuery.parseJSON(xhr.responseText);
} catch(err) {
}
if (responseData) {
$("[data-field='"+responseData.field+"']").addClass("field-error");
$("[data-field='"+responseData.field+"']").addClass("field-error").attr("aria-invalid", "true");
$("#feedback_error").html(responseData.error).stop().css("display", "block");
} else {
// If no data (or malformed data) is returned, a server error occurred
@@ -217,6 +218,8 @@ discussion_link = get_discussion_link(course) if course else None
});
%endif
}
// Make change explicit to assistive technology
$("#feedback_error").focus();
});
})(this)
</script>