Skip to content

E
edx-platform
Commit 44109d16 by Dave St.Germain
Options

For a11y, modal dialogs and script templates should be hidden from 

screen readers. Also, the mathjax message should be wrapped to prevent
non-IE browsers from complaining about a feature that is IE-only.
parent e64ab5e4
Showing with 45 additions and 38 deletions
lms/djangoapps/courseware/tests/test_masquerade.py
...@@ -63,7 +63,7 @@ class TestStaffMasqueradeAsStudent(ModuleStoreTestCase, LoginEnrollmentTestCase) ...@@ -63,7 +63,7 @@ class TestStaffMasqueradeAsStudent(ModuleStoreTestCase, LoginEnrollmentTestCase)
def test_staff_debug_for_staff(self): def test_staff_debug_for_staff(self):
resp = self.get_cw_section() resp = self.get_cw_section()
sdebug = '<div><a href="#i4x_edX_graded_problem_H1P1_debug" id="i4x_edX_graded_problem_H1P1_trig">Staff Debug Info</a></div>' sdebug = '<div aria-hidden="true"><a href="#i4x_edX_graded_problem_H1P1_debug" id="i4x_edX_graded_problem_H1P1_trig">Staff Debug Info</a></div>'
self.assertTrue(sdebug in resp.content) self.assertTrue(sdebug in resp.content)
......
lms/static/coffee/src/mathjax_accessible.coffee
$ -> $ ->
isMPInstalled = (boolean) -> if window.navigator.appName is "Microsoft Internet Explorer"
# check if MathPlayer is installed isMPInstalled = (boolean) ->
# (from http://www.dessci.com/en/products/mathplayer/check.htm) # check if MathPlayer is installed
try # (from http://www.dessci.com/en/products/mathplayer/check.htm)
oMP = new ActiveXObject("MathPlayer.Factory.1") try
true oMP = new ActiveXObject("MathPlayer.Factory.1")
catch e true
false catch e
false
# detect if there is mathjax on the page # detect if there is mathjax on the page
# if not, set 'aria-hidden' to 'true' # if not, set 'aria-hidden' to 'true'
if MathJax? and not isMPInstalled() if MathJax? and not isMPInstalled()
$("#mathjax-accessibility-message").attr("aria-hidden", "false") $("#mathjax-accessibility-message").attr("aria-hidden", "false")
if MathJax? and $("#mathplayer-browser-message").length > 0 if MathJax? and $("#mathplayer-browser-message").length > 0
$("#mathplayer-browser-message").attr("aria-hidden", "false") $("#mathplayer-browser-message").attr("aria-hidden", "false")
else else
$("#mathjax-accessibility-message").attr("aria-hidden", "true") $("#mathjax-accessibility-message").attr("aria-hidden", "true")
lms/templates/discussion/_underscore_templates.html
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<%! from django.template.defaultfilters import escapejs %> <%! from django.template.defaultfilters import escapejs %>
<%! from django_comment_client.permissions import has_permission %> <%! from django_comment_client.permissions import has_permission %>
<script type="text/template" id="thread-template"> <script aria-hidden="true" type="text/template" id="thread-template">
<article class="discussion-article" data-id="${'<%- id %>'}"> <article class="discussion-article" data-id="${'<%- id %>'}">
<div class="thread-content-wrapper"></div> <div class="thread-content-wrapper"></div>
<div class="response-count"/> <div class="response-count"/>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
</article> </article>
</script> </script>
<script type="text/template" id="thread-show-template"> <script aria-hidden="true" type="text/template" id="thread-show-template">
<div class="discussion-post"> <div class="discussion-post">
<header> <header>
${"<% if (obj.group_id) { %>"} ${"<% if (obj.group_id) { %>"}
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
</div> </div>
</script> </script>
<script type="text/template" id="thread-edit-template"> <script aria-hidden="true" type="text/template" id="thread-edit-template">
<div class="discussion-post edit-post-form"> <div class="discussion-post edit-post-form">
<h1>${_("Editing post")}</h1> <h1>${_("Editing post")}</h1>
<ul class="edit-post-form-errors"></ul> <ul class="edit-post-form-errors"></ul>
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
</div> </div>
</script> </script>
<script type="text/template" id="thread-response-template"> <script aria-hidden="true" type="text/template" id="thread-response-template">
<div class="discussion-response"></div> <div class="discussion-response"></div>
<ol class="comments"> <ol class="comments">
<li class="new-comment response-local"> <li class="new-comment response-local">
...@@ -127,7 +127,7 @@ ...@@ -127,7 +127,7 @@
</ol> </ol>
</script> </script>
<script type="text/template" id="thread-response-show-template"> <script aria-hidden="true" type="text/template" id="thread-response-show-template">
<header class="response-local"> <header class="response-local">
<a href="#" class="vote-btn" role="button" aria-pressed="false"><!-- DiscussionContentView.renderVote() populates this --></a> <a href="#" class="vote-btn" role="button" aria-pressed="false"><!-- DiscussionContentView.renderVote() populates this --></a>
<a href="javascript:void(0)" class="endorse-btn action-endorse" style="cursor: default; display: none;" data-tooltip="${_('endorse') | h}"><span class="check-icon" style="pointer-events: none; "></span></a> <a href="javascript:void(0)" class="endorse-btn action-endorse" style="cursor: default; display: none;" data-tooltip="${_('endorse') | h}"><span class="check-icon" style="pointer-events: none; "></span></a>
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
</ul> </ul>
</script> </script>
<script type="text/template" id="thread-response-edit-template"> <script aria-hidden="true" type="text/template" id="thread-response-edit-template">
<div class="edit-post-form"> <div class="edit-post-form">
<h1>${_("Editing response")}</h1> <h1>${_("Editing response")}</h1>
<ul class="edit-post-form-errors"></ul> <ul class="edit-post-form-errors"></ul>
...@@ -161,7 +161,7 @@ ...@@ -161,7 +161,7 @@
</div> </div>
</script> </script>
<script type="text/template" id="response-comment-show-template"> <script aria-hidden="true" type="text/template" id="response-comment-show-template">
<div id="comment_${'<%- id %>'}"> <div id="comment_${'<%- id %>'}">
<div class="response-body">${'<%- body %>'}</div> <div class="response-body">${'<%- body %>'}</div>
<div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="${_('Report Misuse') | h}" role="button" aria-pressed="false" tabindex="0"> <div class="discussion-flag-abuse notflagged" data-role="thread-flag" data-tooltip="${_('Report Misuse') | h}" role="button" aria-pressed="false" tabindex="0">
...@@ -188,7 +188,7 @@ ...@@ -188,7 +188,7 @@
</div> </div>
</script> </script>
<script type="text/template" id="thread-list-item-template"> <script aria-hidden="true" type="text/template" id="thread-list-item-template">
<a href="${'<%- id %>'}" data-id="${'<%- id %>'}"> <a href="${'<%- id %>'}" data-id="${'<%- id %>'}">
<span class="title">${"<%- title %>"}</span> <span class="title">${"<%- title %>"}</span>
<% <%
...@@ -231,7 +231,7 @@ ...@@ -231,7 +231,7 @@
<span class="votes-count">+${'<%='}${js_block}${'%>'}</span> <span class="votes-count">+${'<%='}${js_block}${'%>'}</span>
</a> </a>
</script> </script>
<script type="text/template" id="discussion-home"> <script aria-hidden="true" type="text/template" id="discussion-home">
<div class="discussion-article blank-slate"> <div class="discussion-article blank-slate">
<section class="home-header"> <section class="home-header">
<span class="label">${_("DISCUSSION HOME:")}</span> <span class="label">${_("DISCUSSION HOME:")}</span>
......
lms/templates/mathjax_accessible.html
<%! from django.utils.translation import ugettext as _ %> <%! from django.utils.translation import ugettext as _ %>
<!--[if IE]>
<div class="sr message-accessibility message" id="mathjax-accessibility-message" aria-hidden="true"> <div class="sr message-accessibility message" id="mathjax-accessibility-message" aria-hidden="true">
<p class="copy">${ <p class="copy">${
_("This page features MathJax technology to render mathematical " _("This page features MathJax technology to render mathematical "
...@@ -11,12 +11,10 @@ ...@@ -11,12 +11,10 @@
link_end = u'</a>') link_end = u'</a>')
}</p> }</p>
</div> </div>
<!--[if (lt IE 6)|(gt IE 9)|(!IE)]><!-->
<div class="sr message-accessibility message" id="mathplayer-browser-message" aria-hidden="true"> <div class="sr message-accessibility message" id="mathplayer-browser-message" aria-hidden="true">
<p class="copy"> <p class="copy">
${_("Your browser does not support the MathPlayer plugin. To use " ${_("Your browser does not support the MathPlayer plugin. To use "
"MathPlayer, please use Internet Explorer 6 through 9.")} "MathPlayer, please use Internet Explorer 6 through 9.")}
</p> </p>
</div> </div>
<!--<![endif]--> <![endif]-->
lms/templates/navigation.html
...@@ -12,6 +12,7 @@ from status.status import get_site_status_msg ...@@ -12,6 +12,7 @@ from status.status import get_site_status_msg
%> %>
<%! from microsite_configuration.middleware import MicrositeConfiguration %> <%! from microsite_configuration.middleware import MicrositeConfiguration %>
<%! from microsite_configuration.templatetags.microsite import platform_name %>
## Provide a hook for themes to inject branding on top. ## Provide a hook for themes to inject branding on top.
<%block name="navigation_top" /> <%block name="navigation_top" />
...@@ -46,7 +47,12 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -46,7 +47,12 @@ site_status_msg = get_site_status_msg(course_id)
<h1 class="logo"> <h1 class="logo">
<a href="${marketing_link('ROOT')}"> <a href="${marketing_link('ROOT')}">
<%block name="navigation_logo"> <%block name="navigation_logo">
<img src="${static.url(branding.get_logo_url())}" alt="${MicrositeConfiguration.get_microsite_configuration_value('platform_name', settings.PLATFORM_NAME)} ${_('Home')}" /> <img src="${static.url(branding.get_logo_url())}" alt="
% if course:
${course.display_org_with_default | h}: ${course.display_number_with_default | h} ${course.display_name_with_default | h} @
% endif
${platform_name()}
" />
</%block> </%block>
</a> </a>
</h1> </h1>
...@@ -79,7 +85,7 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -79,7 +85,7 @@ site_status_msg = get_site_status_msg(course_id)
<%block name="navigation_dropdown_menu_links" > <%block name="navigation_dropdown_menu_links" >
<li><a href="${marketing_link('FAQ')}">${_("Help")}</a></li> <li><a href="${marketing_link('FAQ')}">${_("Help")}</a></li>
</%block> </%block>
<li role="presentation"><a href="${reverse('logout')}" role="menuitem">${_("Log Out")}</a></li> <li><a href="${reverse('logout')}" role="menuitem">${_("Log Out")}</a></li>
</ul> </ul>
</li> </li>
</ol> </ol>
...@@ -135,7 +141,9 @@ site_status_msg = get_site_status_msg(course_id) ...@@ -135,7 +141,9 @@ site_status_msg = get_site_status_msg(course_id)
</nav> </nav>
</header> </header>
% if course: % if course:
<!--[if IE]>
<div class="ie-banner" aria-hidden="true">${_('<strong>Warning:</strong> Your browser is not fully supported. We strongly recommend using {chrome_link_start}Chrome{chrome_link_end} or {ff_link_start}Firefox{ff_link_end}.').format(chrome_link_start='<a href="https://www.google.com/intl/en/chrome/browser/" target="_blank">', chrome_link_end='</a>', ff_link_start='<a href="http://www.mozilla.org/en-US/firefox/new/" target="_blank">', ff_link_end='</a>')}</div> <div class="ie-banner" aria-hidden="true">${_('<strong>Warning:</strong> Your browser is not fully supported. We strongly recommend using {chrome_link_start}Chrome{chrome_link_end} or {ff_link_start}Firefox{ff_link_end}.').format(chrome_link_start='<a href="https://www.google.com/intl/en/chrome/browser/" target="_blank">', chrome_link_end='</a>', ff_link_start='<a href="http://www.mozilla.org/en-US/firefox/new/" target="_blank">', ff_link_end='</a>')}</div>
<![endif]-->
% endif % endif
%if not user.is_authenticated(): %if not user.is_authenticated():
......
lms/templates/staff_problem_info.html
...@@ -16,14 +16,14 @@ ${block_content} ...@@ -16,14 +16,14 @@ ${block_content}
% endif % endif
</div> </div>
% endif % endif
<div><a href="#${element_id}_debug" id="${element_id}_trig">${_("Staff Debug Info")}</a></div> <div aria-hidden="true"><a href="#${element_id}_debug" id="${element_id}_trig">${_("Staff Debug Info")}</a></div>
% if settings.FEATURES.get('ENABLE_STUDENT_HISTORY_VIEW') and \ % if settings.FEATURES.get('ENABLE_STUDENT_HISTORY_VIEW') and \
location.category == 'problem': location.category == 'problem':
<div><a href="#${element_id}_history" id="${element_id}_history_trig">${_("Submission history")}</a></div> <div aria-hidden="true"><a href="#${element_id}_history" id="${element_id}_history_trig">${_("Submission history")}</a></div>
% endif % endif
<section id="${element_id}_xqa-modal" class="modal xqa-modal" style="width:80%; left:20%; height:80%; overflow:auto" > <section aria-hidden="true" id="${element_id}_xqa-modal" class="modal xqa-modal" style="width:80%; left:20%; height:80%; overflow:auto" >
<div class="inner-wrapper"> <div class="inner-wrapper">
<header> <header>
<h2>${_("{platform_name} Content Quality Assessment").format(platform_name=settings.PLATFORM_NAME)}</h2> <h2>${_("{platform_name} Content Quality Assessment").format(platform_name=settings.PLATFORM_NAME)}</h2>
...@@ -45,7 +45,7 @@ ${block_content} ...@@ -45,7 +45,7 @@ ${block_content}
</div> </div>
</section> </section>
<section class="modal staff-modal" id="${element_id}_debug" style="width:80%; left:20%; height:80%; overflow:auto;" > <section aria-hidden="true" class="modal staff-modal" id="${element_id}_debug" style="width:80%; left:20%; height:80%; overflow:auto; display:none" >
<div class="inner-wrapper" style="color:black"> <div class="inner-wrapper" style="color:black">
<header> <header>
<h2>${_('Staff Debug')}</h2> <h2>${_('Staff Debug')}</h2>
...@@ -53,7 +53,7 @@ ${block_content} ...@@ -53,7 +53,7 @@ ${block_content}
<div class="staff_info" style="display:block"> <div class="staff_info" style="display:block">
is_released = ${is_released} is_released = ${is_released}
location = ${location | h} location = ${location | h}
<table> <table summary="${_('Module Fields')}">
<tr><th>${_('Module Fields')}</th></tr> <tr><th>${_('Module Fields')}</th></tr>
%for name, field in fields: %for name, field in fields:
<tr><td>${name}</td><td><pre style="display:inline-block; margin: 0;">${field | h}</pre></td></tr> <tr><td>${name}</td><td><pre style="display:inline-block; margin: 0;">${field | h}</pre></td></tr>
...@@ -73,7 +73,7 @@ category = ${category | h} ...@@ -73,7 +73,7 @@ category = ${category | h}
</div> </div>
</section> </section>
<section class="modal history-modal" id="${element_id}_history" style="width:80%; left:20%; height:80%; overflow:auto;" > <section aria-hidden="true" class="modal history-modal" id="${element_id}_history" style="width:80%; left:20%; height:80%; overflow:auto;" >
<div class="inner-wrapper" style="color:black"> <div class="inner-wrapper" style="color:black">
<header> <header>
<h2>${_("Submission History Viewer")}</h2> <h2>${_("Submission History Viewer")}</h2>
......
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