Skip to content
Snippets Groups Projects
Commit 44109d16 authored by Dave St.Germain's avatar Dave St.Germain
Browse files

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
No related merge requests found
......@@ -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>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment