From 44109d16ab541a481559c6bc99e3e23763ae6f43 Mon Sep 17 00:00:00 2001
From: "Dave St.Germain" <dstgermain@edx.org>
Date: Thu, 6 Feb 2014 11:13:04 -0500
Subject: [PATCH] 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.

---
 .../courseware/tests/test_masquerade.py       |  2 +-
 .../coffee/src/mathjax_accessible.coffee      | 33 ++++++++++---------
 .../discussion/_underscore_templates.html     | 18 +++++-----
 lms/templates/mathjax_accessible.html         |  6 ++--
 lms/templates/navigation.html                 | 12 +++++--
 lms/templates/staff_problem_info.html         | 12 +++----
 6 files changed, 45 insertions(+), 38 deletions(-)

diff --git a/lms/djangoapps/courseware/tests/test_masquerade.py b/lms/djangoapps/courseware/tests/test_masquerade.py
index 5f357e4562..4caa73da41 100644
--- a/lms/djangoapps/courseware/tests/test_masquerade.py
+++ b/lms/djangoapps/courseware/tests/test_masquerade.py
@@ -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)
 
diff --git a/lms/static/coffee/src/mathjax_accessible.coffee b/lms/static/coffee/src/mathjax_accessible.coffee
index a97c7fa5b2..b1bd0ca568 100644
--- a/lms/static/coffee/src/mathjax_accessible.coffee
+++ b/lms/static/coffee/src/mathjax_accessible.coffee
@@ -1,20 +1,21 @@
 $ ->
-	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")
diff --git a/lms/templates/discussion/_underscore_templates.html b/lms/templates/discussion/_underscore_templates.html
index 2344d006ad..1505ebafed 100644
--- a/lms/templates/discussion/_underscore_templates.html
+++ b/lms/templates/discussion/_underscore_templates.html
@@ -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>
diff --git a/lms/templates/mathjax_accessible.html b/lms/templates/mathjax_accessible.html
index e5fb8ca571..ad97a73b3f 100644
--- a/lms/templates/mathjax_accessible.html
+++ b/lms/templates/mathjax_accessible.html
@@ -1,5 +1,5 @@
 <%! 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]-->
diff --git a/lms/templates/navigation.html b/lms/templates/navigation.html
index b0da8aaa1c..baec2b4cdd 100644
--- a/lms/templates/navigation.html
+++ b/lms/templates/navigation.html
@@ -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():
diff --git a/lms/templates/staff_problem_info.html b/lms/templates/staff_problem_info.html
index 7e55612034..5348aa96ef 100644
--- a/lms/templates/staff_problem_info.html
+++ b/lms/templates/staff_problem_info.html
@@ -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>