Skip to content

Help Modal - Accessibility Fixes #902

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jtauber merged 6 commits into from
Sep 13, 2013
Merged

Help Modal - Accessibility Fixes #902

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
f708806
accessibility: Add `aria-describedby` to login/forgot password (LMS-602)
antoviaque Sep 9, 2013
9147051
accessibility: Focus on error messages in Help modal (LMS-584)
antoviaque Sep 9, 2013
4629ce7
accessibility: Add aria-hidden attribute to the help modal (LMS-584)
antoviaque Sep 9, 2013
23eab5c
accessibility: Replace close modal button <div> by <a> link (LMS-582)
antoviaque Sep 9, 2013
aee5af5
accessibility: Manage keyboard focus on help modal dialog (LMS-581)
antoviaque Sep 9, 2013
8d2297e
accessibility: Allow to close help modal with "escape" key (LMS-581)
antoviaque Sep 9, 2013
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 7 additions & 13 deletions lms/static/sass/shared/_modal.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,21 +282,15 @@
right: 2px;
top: 0px;
z-index: 3;

.inner {
p {
color: $lighter-base-font-color;
font: normal 1.2rem/1.2rem $sans-serif;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.8);
@include transition(all 0.15s ease-out 0s);
}
}
color: $lighter-base-font-color;
font: normal 1.2rem/1.2rem $sans-serif;
text-align: center;
text-shadow: 0 1px rgba(255,255,255, 0.8);
@include transition(all 0.15s ease-out 0s);

&:hover {
p {
color: $base-font-color;
}
color: $base-font-color;
text-decoration: none;
}
}
}
Expand Down
32 changes: 6 additions & 26 deletions lms/templates/dashboard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -359,12 +359,8 @@ <h2>${_('Email Settings for {course_number}').format(course_number='<span id="em
<input type="submit" id="submit" value="Save Settings" />
</div>
</form>

<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>

<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
</div>
</section>

Expand All @@ -385,11 +381,7 @@ <h2>${_('Are you sure you want to unregister from {course_number}?').format(cour
</div>
</form>

<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
</div>
</section>

Expand All @@ -406,11 +398,7 @@ <h2>${_('Password Reset Email Sent')}</h2>
</section>
</form>
</div>
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
</div>
</section>

Expand Down Expand Up @@ -439,11 +427,7 @@ <h2><span id="change_email_title">${_("Change Email")}</span></h2>
</fieldset>
</form>
</div>
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
</div>
</section>

Expand Down Expand Up @@ -471,10 +455,6 @@ <h2>${_("Change your name")}</h2>
</fieldset>
</form>
</div>
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>
</div>
</section>
6 changes: 3 additions & 3 deletions lms/templates/forgot_password_modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,8 @@ <h2>${_("Password Reset")}</h2>
<ol class="list-input">
<li class="field required text" id="field-email">
<label for="pwd_reset_email">${_("Your E-mail Address")}</label>
<input class="" id="pwd_reset_email" type="email" name="email" value="" placeholder="example: username@domain.com" />
<span class="tip tip-input">${_("This is the email address you used to register with {platform}").format(platform=settings.PLATFORM_NAME)}</span>
<input class="" id="pwd_reset_email" type="email" name="email" value="" placeholder="example: username@domain.com" aria-describedby="pwd_reset_email-tip" />
<span class="tip tip-input" id="pwd_reset_email-tip">${_("This is the e-mail address you used to register with {platform}").format(platform=settings.PLATFORM_NAME)}</span>
</li>
</ol>
</fieldset>
Expand All @@ -31,7 +31,7 @@ <h2>${_("Password Reset")}</h2>
</form>
</div>

<a href="#" class="close-modal" title="Close Modal">
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">
<div class="inner">
<p>&#10005;</p>
</div>
Expand Down
74 changes: 48 additions & 26 deletions lms/templates/help_modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,11 @@
<a href="#help-modal" rel="leanModal">${_("Help")}</a>
</div>

<section id="help-modal" class="modal">
<section id="help-modal" class="modal" aria-hidden="true">
<div class="inner-wrapper" id="help_wrapper">
## TODO: find a way to refactor this
<a href="#" role="button" class="close-modal" tabindex="0" title="${_('Close Modal')}">&#10005;</a>

<header>
<h2>${_('{span_start}{platform_name}{span_end} Help').format(span_start='<span class="edx">', span_end='</span>', platform_name=settings.PLATFORM_NAME)}</h2>
<hr>
Expand Down Expand Up @@ -47,20 +50,15 @@ <h2>${_('{span_start}{platform_name}{span_end} Help').format(span_start='<span c
<a href="#" id="feedback_link_suggestion">${_('Make a suggestion')}</a>
<a href="#" id="feedback_link_question">${_('Ask a question')}</a>
</div>

## TODO: find a way to refactor this
<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
</div>

<div class="inner-wrapper" id="feedback_form_wrapper">
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>

<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">
Expand All @@ -77,18 +75,14 @@ <h2>${_('{span_start}{platform_name}{span_end} Help').format(span_start='<span c
<input name="course_id" type="hidden" value="${course.id | h}">
% endif
<div class="submit">
<input name="submit" type="submit" value="Submit">
<input name="submit" type="submit" value="Submit" id="feedback_submit">
</div>
</form>

<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</div>
</div>

<div class="inner-wrapper" id="feedback_success_wrapper">
<div class="inner-wrapper" id="feedback_success_wrapper" tabindex="-1">
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">&#10005;</a>

<header>
<h2>${_('Thank You!')}</h2>
<hr>
Expand All @@ -112,21 +106,31 @@ <h2>${_('Thank You!')}</h2>
).format(
open_time=open_time,
close_time=close_time,
link_start='<a href="{}" target="_blank">'.format(marketing_link('FAQ')),
link_start='<a href="{}" target="_blank" id="feedback-faq-link">'.format(marketing_link('FAQ')),
link_end='</a>'
)}
</p>

<div class="close-modal">
<div class="inner">
<p>&#10005;</p>
</div>
</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");
$(".help-tab").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();
}
});
};

$(".help-tab").click(function() {
$(".field-error").removeClass("field-error");
$("#feedback_form")[0].reset();
Expand All @@ -135,6 +139,10 @@ <h2>${_('Thank You!')}</h2>
$("#feedback_error").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();
});
showFeedback = function(event, issue_type, title, subject_label, details_label) {
$("#help_wrapper").css("display", "none");
Expand All @@ -143,8 +151,19 @@ <h2>${_('Thank You!')}</h2>
$("#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();
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) {
showFeedback(
event,
Expand Down Expand Up @@ -182,16 +201,17 @@ <h2>${_('Thank You!')}</h2>
$("#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
Expand All @@ -217,6 +237,8 @@ <h2>${_('Thank You!')}</h2>
});
%endif
}
// Make change explicit to assistive technology
$("#feedback_error").focus();
});
})(this)
</script>
Expand Down
3 changes: 2 additions & 1 deletion lms/templates/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,8 @@ <h3 class="message-title">${_("The following errors occured while logging you in
<ol class="list-input">
<li class="field required text" id="field-email">
<label for="email">${_('E-mail')}</label>
<input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" required aria-required="true" />
<input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" required aria-required="true" aria-described-by="email-tip" />
<span class="tip tip-input" id="email-tip">${_("This is the e-mail address you used to register with {platform}").format(platform=settings.PLATFORM_NAME)}</span>
</li>
<li class="field required password" id="field-password">
<label for="password">${_('Password')}</label>
Expand Down
2 changes: 1 addition & 1 deletion lms/templates/login_modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ <h2>${_("Log In")}</h2>
% endif
</section>

<a href="#" class="close-modal" title="Close Modal">
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">
<div class="inner">
<p>&#10005;</p>
</div>
Expand Down
2 changes: 1 addition & 1 deletion lms/templates/signup_modal.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ <h2>${_('Sign Up for {span_start}{platform_name}{span_end}').format(span_start='

</div>

<a href="#" class="close-modal" title="${_('Close Modal')}">
<a href="#" role="button" class="close-modal" title="${_('Close Modal')}">
<div class="inner">
<p>&#10005;</p>
</div>
Expand Down