Skip to content
Snippets Groups Projects
Commit c6dfd97e authored by James Tauber's avatar James Tauber
Browse files

Merge pull request #902 from antoviaque/accessibility 

Help Modal - Accessibility Fixes
parents b6761498 8d2297eb
No related merge requests found
Hide whitespace changes
Inline Side-by-side
lms/static/sass/shared/_modal.scss
+ 7
− 13
View file @ c6dfd97e
......@@ -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;
}
}
}
......
lms/templates/dashboard.html
+ 6
− 26
View file @ c6dfd97e
......@@ -371,12 +371,8 @@
<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>
......@@ -397,11 +393,7 @@
</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>
......@@ -418,11 +410,7 @@
</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>
......@@ -451,11 +439,7 @@
</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>
......@@ -483,10 +467,6 @@
</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>
lms/templates/forgot_password_modal.html
+ 3
− 3
View file @ c6dfd97e
......@@ -19,8 +19,8 @@
<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>
......@@ -31,7 +31,7 @@
</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>
......
lms/templates/help_modal.html
+ 48
− 26
View file @ c6dfd97e
......@@ -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>
......@@ -47,20 +50,15 @@ discussion_link = get_discussion_link(course) if course else None
<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">
......@@ -77,18 +75,14 @@ discussion_link = get_discussion_link(course) if course else None
<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>
......@@ -112,21 +106,31 @@ discussion_link = get_discussion_link(course) if course else None
).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();
......@@ -135,6 +139,10 @@ discussion_link = get_discussion_link(course) if course else None
$("#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");
......@@ -143,8 +151,19 @@ discussion_link = get_discussion_link(course) if course else None
$("#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,
......@@ -182,16 +201,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 +237,8 @@ discussion_link = get_discussion_link(course) if course else None
});
%endif
}
// Make change explicit to assistive technology
$("#feedback_error").focus();
});
})(this)
</script>
......
lms/templates/login.html
+ 2
− 1
View file @ c6dfd97e
......@@ -121,7 +121,8 @@
<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>
......
lms/templates/login_modal.html
+ 1
− 1
View file @ c6dfd97e
......@@ -39,7 +39,7 @@
% 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>
......
lms/templates/signup_modal.html
+ 1
− 1
View file @ c6dfd97e
......@@ -131,7 +131,7 @@
</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>
......
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