Commit 44109d16 by Dave St.Germain

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
......@@ -63,7 +63,7 @@ class TestStaffMasqueradeAsStudent(ModuleStoreTestCase, LoginEnrollmentTestCase)
def test_staff_debug_for_staff(self):
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)
......
$ ->
isMPInstalled = (boolean) ->
# check if MathPlayer is installed
# (from http://www.dessci.com/en/products/mathplayer/check.htm)
try
oMP = new ActiveXObject("MathPlayer.Factory.1")
true
catch e
false
if window.navigator.appName is "Microsoft Internet Explorer"
isMPInstalled = (boolean) ->
# check if MathPlayer is installed
# (from http://www.dessci.com/en/products/mathplayer/check.htm)
try
oMP = new ActiveXObject("MathPlayer.Factory.1")
true
catch e
false
# detect if there is mathjax on the page
# if not, set 'aria-hidden' to 'true'
if MathJax? and not isMPInstalled()
$("#mathjax-accessibility-message").attr("aria-hidden", "false")
# detect if there is mathjax on the page
# if not, set 'aria-hidden' to 'true'
if MathJax? and not isMPInstalled()
$("#mathjax-accessibility-message").attr("aria-hidden", "false")
if MathJax? and $("#mathplayer-browser-message").length > 0
$("#mathplayer-browser-message").attr("aria-hidden", "false")
if MathJax? and $("#mathplayer-browser-message").length > 0
$("#mathplayer-browser-message").attr("aria-hidden", "false")
else
$("#mathjax-accessibility-message").attr("aria-hidden", "true")
else
$("#mathjax-accessibility-message").attr("aria-hidden", "true")
......@@ -2,7 +2,7 @@
<%! from django.template.defaultfilters import escapejs %>
<%! 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 %>'}">
<div class="thread-content-wrapper"></div>
<div class="response-count"/>
......@@ -30,7 +30,7 @@
</article>
</script>
<script type="text/template" id="thread-show-template">
<script aria-hidden="true" type="text/template" id="thread-show-template">
<div class="discussion-post">
<header>
${"<% if (obj.group_id) { %>"}
......@@ -92,7 +92,7 @@
</div>
</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">
<h1>${_("Editing post")}</h1>
<ul class="edit-post-form-errors"></ul>
......@@ -108,7 +108,7 @@
</div>
</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>
<ol class="comments">
<li class="new-comment response-local">
......@@ -127,7 +127,7 @@
</ol>
</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">
<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>
......@@ -149,7 +149,7 @@
</ul>
</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">
<h1>${_("Editing response")}</h1>
<ul class="edit-post-form-errors"></ul>
......@@ -161,7 +161,7 @@
</div>
</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 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">
......@@ -188,7 +188,7 @@
</div>
</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 %>'}">
<span class="title">${"<%- title %>"}</span>
<%
......@@ -231,7 +231,7 @@
<span class="votes-count">+${'<%='}${js_block}${'%>'}</span>
</a>
</script>
<script type="text/template" id="discussion-home">
<script aria-hidden="true" type="text/template" id="discussion-home">
<div class="discussion-article blank-slate">
<section class="home-header">
<span class="label">${_("DISCUSSION HOME:")}</span>
......
<%! from django.utils.translation import ugettext as _ %>
<!--[if IE]>
<div class="sr message-accessibility message" id="mathjax-accessibility-message" aria-hidden="true">
<p class="copy">${
_("This page features MathJax technology to render mathematical "
......@@ -11,12 +11,10 @@
link_end = u'</a>')
}</p>
</div>
<!--[if (lt IE 6)|(gt IE 9)|(!IE)]><!-->
<div class="sr message-accessibility message" id="mathplayer-browser-message" aria-hidden="true">
<p class="copy">
${_("Your browser does not support the MathPlayer plugin. To use "
"MathPlayer, please use Internet Explorer 6 through 9.")}
</p>
</div>
<!--<![endif]-->
<![endif]-->
......@@ -12,6 +12,7 @@ from status.status import get_site_status_msg
%>
<%! from microsite_configuration.middleware import MicrositeConfiguration %>
<%! from microsite_configuration.templatetags.microsite import platform_name %>
## Provide a hook for themes to inject branding on top.
<%block name="navigation_top" />
......@@ -46,7 +47,12 @@ site_status_msg = get_site_status_msg(course_id)
<h1 class="logo">
<a href="${marketing_link('ROOT')}">
<%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>
</a>
</h1>
......@@ -79,7 +85,7 @@ site_status_msg = get_site_status_msg(course_id)
<%block name="navigation_dropdown_menu_links" >
<li><a href="${marketing_link('FAQ')}">${_("Help")}</a></li>
</%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>
</li>
</ol>
......@@ -135,7 +141,9 @@ site_status_msg = get_site_status_msg(course_id)
</nav>
</header>
% 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>
<![endif]-->
% endif
%if not user.is_authenticated():
......
......@@ -16,14 +16,14 @@ ${block_content}
% endif
</div>
% 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 \
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
<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">
<header>
<h2>${_("{platform_name} Content Quality Assessment").format(platform_name=settings.PLATFORM_NAME)}</h2>
......@@ -45,7 +45,7 @@ ${block_content}
</div>
</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">
<header>
<h2>${_('Staff Debug')}</h2>
......@@ -53,7 +53,7 @@ ${block_content}
<div class="staff_info" style="display:block">
is_released = ${is_released}
location = ${location | h}
<table>
<table summary="${_('Module Fields')}">
<tr><th>${_('Module Fields')}</th></tr>
%for name, field in fields:
<tr><td>${name}</td><td><pre style="display:inline-block; margin: 0;">${field | h}</pre></td></tr>
......@@ -73,7 +73,7 @@ category = ${category | h}
</div>
</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">
<header>
<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