Skip to content

E
edx-platform
Commit e555a2d9 by Giulio Gratta
Options

Merge pull request #2851 from edx/giulio/high-a11y-issues-mar2014 

High priority a11y issues march 2014
parents f2cfb493 1cd5a80d
Showing with 79 additions and 68 deletions
common/lib/xmodule/xmodule/css/capa/display.scss
......@@ -32,7 +32,7 @@ iframe[seamless]{
div.problem-progress {
display: inline-block;
padding-left: 5px;
color: #999;
color: #666;
font-weight: 100;
font-size: em(16);
}
......
common/static/coffee/src/discussion/utils.coffee
......@@ -105,7 +105,7 @@ class @DiscussionUtil
alertDiv = $("<div class='modal' role='alertdialog' id='discussion-alert' aria-describedby='discussion-alert-message'/>").css("display", "none")
alertDiv.html(
"<div class='inner-wrapper discussion-alert-wrapper'>" +
" <button class='close-modal dismiss' aria-hidden='true'>&#10005;</button>" +
" <button class='close-modal dismiss' aria-hidden='true'><i class='icon-remove'></i></button>" +
" <header><h2/><hr/></header>" +
" <p id='discussion-alert-message'/>" +
" <hr/>" +
......
lms/templates/dashboard.html
......@@ -285,10 +285,11 @@
<section id="email-settings-modal" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="email-settings-title">
<button class="close-modal">&#10005;
<button class="close-modal">
<i class="icon-remove"></i>
<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 Modal')}
${_('Close')}
</span>
</button>
......@@ -297,7 +298,7 @@
${_('Email Settings for {course_number}').format(course_number='<span id="email_settings_course_number"></span>')}
<span class="sr">,
## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
${_("modal open")}
${_("window open")}
</span>
</h2>
<hr/>
......@@ -317,10 +318,11 @@
<section id="password_reset_complete" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="password-reset-email">
<button class="close-modal">&#10005;
<button class="close-modal">
<i class="icon-remove"></i>
<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 Modal')}
${_('Close')}
</span>
</button>
......@@ -329,7 +331,7 @@
${_('Password Reset Email Sent')}
<span class="sr">,
## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
${_("modal open")}
${_("window open")}
</span>
</h2>
<hr/>
......@@ -346,10 +348,11 @@
<section id="change_email" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="change_email_title">
<button class="close-modal">&#10005;
<button class="close-modal">
<i class="icon-remove"></i>
<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 Modal')}
${_('Close')}
</span>
</button>
......@@ -358,7 +361,7 @@
<span id="change_email_title">${_("Change Email")}</span>
<span class="sr">,
## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
${_("modal open")}
${_("window open")}
</span>
</h2>
<hr/>
......@@ -389,10 +392,11 @@
<section id="apply_name_change" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="change-name-title">
<button class="close-modal">&#10005;
<button class="close-modal">
<i class="icon-remove"></i>
<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 Modal')}
${_('Close')}
</span>
</button>
......@@ -401,7 +405,7 @@
${_("Change your name")}
<span class="sr">,
## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
${_("modal open")}
${_("window open")}
</span>
</h2>
<hr/>
......@@ -431,10 +435,11 @@
<section id="unenroll-modal" class="modal unenroll-modal" aria-hidden="true">
<div class="inner-wrapper" role="alertdialog" aria-labelledy="unenrollment-modal-title">
<button class="close-modal">&#10005;
<button class="close-modal">
<i class="icon-remove"></i>
<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 Modal')}
${_('Close')}
</span>
</button>
......@@ -443,7 +448,7 @@
${_('<span id="track-info"></span> {course_number}? <span id="refund-info"></span>').format(course_number='<span id="unenroll_course_number"></span>')}
<span class="sr">,
## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
${_("modal open")}
${_("window open")}
</span>
</h2>
<hr/>
......
lms/templates/forgot_password_modal.html
......@@ -2,12 +2,13 @@
<%! from microsite_configuration import microsite %>
<%! from django.core.urlresolvers import reverse %>
<section id="forgot-password-modal" class="modal" role="dialog" aria-label="${_('Password Reset')}">
<section id="forgot-password-modal" class="modal" role="dialog" tabindex="-1" aria-label="${_('Password Reset')}">
<div class="inner-wrapper">
<button class="close-modal">&#10005;
<button class="close-modal">
<i class="icon-remove"></i>
<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 Modal')}
${_('Close')}
</span>
</button>
......@@ -43,26 +44,27 @@
<script type="text/javascript">
(function() {
$(document).delegate('#pwd_reset_form', 'ajax:success', function(data, json, xhr) {
if(json.success) {
$("#password-reset").html(json.value);
} else {
if($('#pwd_error').length == 0) {
$('#pwd_reset_form').prepend('<div id="pwd_error" class="modal-form-error">${_("Email is incorrect.")}</div>');
}
$('#pwd_error').stop().css("display", "block");
}
});
$(document).delegate('#pwd_reset_form', 'ajax:success', function(data, json, xhr) {
if(json.success) {
$("#password-reset").html(json.value);
} else {
if($('#pwd_error').length == 0) {
$('#pwd_reset_form').prepend('<div id="pwd_error" class="modal-form-error">${_("Email is incorrect.")}</div>');
}
$('#pwd_error').stop().css("display", "block");
}
});
// removing close link's default behavior
$('#login-modal .close-modal').click(function(e) {
e.preventDefault();
});
// removing close link's default behavior
$('#login-modal .close-modal').click(function(e) {
e.preventDefault();
});
var onModalClose = function() {
$("#forgot-password-modal").attr("aria-hidden", "true");
$("#forgot-password-link").focus();
var onModalClose = function() {
$("#forgot-password-modal").attr("aria-hidden", "true");
$("#forgot-password-link").focus();
};
var cycle_modal_tab = function(from_element_name, to_element_name) {
$(from_element_name).on('keydown', function(e) {
var keyCode = e.keyCode || e.which;
......@@ -74,10 +76,9 @@
});
};
$("#forgot-password-modal .close-modal").click(onModalClose);
$("#forgot-password-modal").focus()
cycle_modal_tab("#forgot-password-modal .close-modal", "#pwd_reset_email")
cycle_modal_tab("#pwd_reset_email", "#pwd_reset_button")
cycle_modal_tab("#pwd_reset_button", "#forgot-password-modal .close-modal")
cycle_modal_tab("#forgot-password-modal .close-modal", "#pwd_reset_email");
cycle_modal_tab("#pwd_reset_email", "#pwd_reset_button");
cycle_modal_tab("#pwd_reset_button", "#forgot-password-modal .close-modal");
// Hitting the ESC key will exit the modal
$("#forgot-password-modal").on("keydown", function(e) {
......
lms/templates/help_modal.html
......@@ -18,10 +18,10 @@
<div class="inner-wrapper" id="help_wrapper">
## TODO: find a way to refactor this
<button class="close-modal "tabindex="0">
&#10005;
<i class="icon-remove"></i>
<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 Modal')}
${_('Close')}
</span>
</button>
......@@ -69,10 +69,10 @@ discussion_link = get_discussion_link(course) if course else None
<div class="inner-wrapper" id="feedback_form_wrapper">
<button class="close-modal">
&#10005;
<i class="icon-remove"></i>
<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 Modal')}
${_('Close')}
</span>
</button>
......@@ -103,10 +103,10 @@ discussion_link = get_discussion_link(course) if course else None
<div class="inner-wrapper" id="feedback_success_wrapper" tabindex="0">
<button class="close-modal" tabindex="0">
&#10005;
<i class="icon-remove"></i>
<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 Modal')}
${_('Close')}
</span>
</button>
......
lms/templates/login.html
......@@ -24,8 +24,8 @@
// new window/tab opening
$('a[rel="external"], a[class="new-vp"]')
.click( function() {
window.open( $(this).attr('href') );
return false;
window.open( $(this).attr('href') );
return false;
});
// form field label styling on focus
......@@ -71,8 +71,9 @@
}
});
$("#forgot-password-link").click(function() {
$("#forgot-password-modal .close-modal").focus()
})
$("#forgot-password-modal").show();
$("#forgot-password-modal .close-modal").focus();
});
})(this);
......@@ -137,7 +138,7 @@
<label for="password">${_('Password')}</label>
<input id="password" type="password" name="password" value="" required aria-required="true" />
<span class="tip tip-input">
<a href="#forgot-password-modal" rel="leanModal" class="pwd-reset action action-forgotpw" id="forgot-password-link" tabindex="-1" role="button" aria-haspopup="true">${_('Forgot password?')}</a>
<a href="#forgot-password-modal" rel="leanModal" class="pwd-reset action action-forgotpw" id="forgot-password-link" role="button" aria-haspopup="true">${_('Forgot password?')}</a>
</span>
</li>
</ol>
......
lms/templates/login_modal.html
......@@ -5,10 +5,11 @@
<section id="login-modal" class="modal login-modal">
<div class="inner-wrapper">
<button class="close-modal">&#10005;
<button class="close-modal">
<i class="icon-remove"></i>
<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 Modal')}
${_('Close')}
</span>
</button>
......
lms/templates/modal/_modal-settings-language.html
......@@ -7,10 +7,11 @@
<section id="change_language" class="modal modal-settings-language" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="change_language_title">
<button class="close-modal">&#10005;
<button class="close-modal">
<i class="icon-remove"></i>
<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 Modal')}
${_('Close')}
</span>
</button>
......@@ -19,7 +20,7 @@
<span id="change_language_title">${_("Change Preferred Language")}</span>
<span class="sr">,
## Translators: this text gives status on if the modal interface (a menu or piece of UI that takes the full focus of the screen) is open or not
${_("modal open")}
${_("window open")}
</span>
</h2>
<hr/>
......
lms/templates/modal/accessible_confirm.html
<%! from django.utils.translation import ugettext as _ %>
<div id="accessibile-confirm-modal" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="accessibile-confirm-title">
<button class="close-modal">&#10005;
<button class="close-modal">
<i class="icon-remove"></i>
<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 Modal')}
......
lms/templates/signup_modal.html
......@@ -10,10 +10,11 @@
<section id="signup-modal" class="modal signup-modal">
<div class="inner-wrapper">
<button class="close-modal">&#10005;
<button class="close-modal">
<i class="icon-remove"></i>
<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 Modal')}
${_('Close')}
</span>
</button>
......
lms/templates/wiki/edit.html
......@@ -45,10 +45,10 @@
</div>
<section id="previewModal" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="preview-title">
<button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
<button class="close-modal"><i class="icon-remove"></i> <span class="sr">{% trans 'Close' %}</span></button>
<header>
<h2 id="preview-title">{% trans "Wiki Preview" %}<span class="sr">, {% trans "modal open" %}</span></h2>
<h2 id="preview-title">{% trans "Wiki Preview" %}<span class="sr">, {% trans "window open" %}</span></h2>
<hr/>
</header>
......
lms/templates/wiki/history.html
......@@ -201,10 +201,10 @@
<input type="hidden" name="r" value="" />
<section id="previewRevisionModal" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="preview-title">
<button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
<button class="close-modal"><i class="icon-remove"></i> <span class="sr">{% trans 'Close' %}</span></button>
<header>
<h2 id="preview-title">{% trans "Wiki Revision Preview" %}<span class="sr">, {% trans "modal open" %}</span></h2>
<h2 id="preview-title">{% trans "Wiki Revision Preview" %}<span class="sr">, {% trans "window open" %}</span></h2>
<hr/>
</header>
<div class="modal-body">
......@@ -232,10 +232,10 @@
<section id="mergeModal" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="merge-title">
<button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
<button class="close-modal"><i class="icon-remove"></i> <span class="sr">{% trans 'Close' %}</span></button>
<header>
<h2 id="merge-title">{% trans "Merge Revision" %}<span class="sr">, {% trans "modal open" %}</span></h2>
<h2 id="merge-title">{% trans "Merge Revision" %}<span class="sr">, {% trans "window open" %}</span></h2>
<hr/>
</header>
<div class="modal-header">
......
lms/templates/wiki/includes/cheatsheet.html
{% load i18n %}
<section id="cheatsheetModal" class="modal" aria-hidden="true">
<div class="inner-wrapper" role="dialog" aria-labelledby="cheatsheet-title">
<button class="close-modal">&#10005; <span class="sr">{% trans 'Close Modal' %}</span></button>
<button class="close-modal"><i class="icon-remove"></i> <span class="sr">{% trans 'Close' %}</span></button>
<header>
<h2 id="cheatsheet-title">{% trans "Wiki Cheatsheet" %}<span class="sr">, {% trans "modal open" %}</span></h2>
<h2 id="cheatsheet-title">{% trans "Wiki Cheatsheet" %}<span class="sr">, {% trans "window open" %}</span></h2>
<hr/>
</header>
<div id="cheatsheet-body" class="modal-body">
......
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