Merge pull request #61 from MITx/el-add-aria-labels-to-nav

Adds ARIA labels to navigation

static/js/application.js

-// Generated by CoffeeScript 1.3.2-pre
+// Generated by CoffeeScript 1.3.3
 (function() {
 
   window.Calculator = (function() {
@@ -20,6 +20,11 @@
     Calculator.prototype.toggle = function() {
       $('li.calc-main').toggleClass('open');
       $('#calculator_wrapper #calculator_input').focus();
+      if ($('.calc.closed').length) {
+        $('.calc').attr('aria-label', 'Open Calculator');
+      } else {
+        $('.calc').attr('aria-label', 'Close Calculator');
+      }
       return $('.calc').toggleClass('closed');
     };
 

templates/coffee/src/calculator.coffee

@@ -10,6 +10,11 @@ class window.Calculator
   toggle: ->
     $('li.calc-main').toggleClass 'open'
     $('#calculator_wrapper #calculator_input').focus()
+    if $('.calc.closed').length
+      $('.calc').attr 'aria-label', 'Open Calculator'
+    else
+      $('.calc').attr 'aria-label', 'Close Calculator'
+
     $('.calc').toggleClass 'closed'
 
   helpToggle: ->

templates/courseware.html

@@ -20,7 +20,7 @@
 
 <section class="main-content">
   <div class="course-wrapper">
-    <section class="course-index">
+    <section aria-label="Course Navigation" class="course-index">
       <header id="open_close_accordion">
         <h2>Courseware Index</h2>
         <a href="#">close</a>

templates/info.html

@@ -27,14 +27,14 @@ $(document).ready(function(){
     <section class="updates">
       <%include file="updates.html" />
     </section>
-    <section class="handouts">
+    <section aria-label="Handout Navigation" class="handouts">
       <%include file="handouts.html" />
     </section>
     % else:
     <section class="updates">
       <%include file="guest_updates.html" />
     </section>
-    <section class="handouts">
+    <section aria-label="Handout Navigation" class="handouts">
       <%include file="guest_handouts.html" />
     </section>
     % endif

templates/main.html

@@ -40,7 +40,7 @@
     <p> Copyright &copy; 2012. MIT. <a href="/t/copyright.html">Some rights reserved.</a>
 </p>
       <nav>
-      <ul class="social">
+      <ul aria-label="Social Links" class="social">
         <li class="linkedin">
           <a href="http://www.linkedin.com/groups/Friends-Alumni-MITx-4316538">Linked In</a>
         </li>
@@ -54,7 +54,7 @@
     <ul>
       <li><a href="#feedback_div" rel="leanModal">Feedback</a></li>
       <li class="calc-main">
-        <a href="#" class="calc">Calculator</a>
+        <a aria-label="Open Calculator" href="#" class="calc">Calculator</a>
 
         <div id="calculator_wrapper">
           <form id="calculator">

templates/marketing.html

@@ -97,7 +97,7 @@ function postJSON(url, data, callback) {
       <li><a href="/t/mitx_help.html">Help</a></li>
     </ul>
 
-    <ul class="social">
+    <ul aria-label="Social Links" class="social">
       <li class="linkedin">
         <a href="http://www.linkedin.com/groups/Friends-Alumni-MITx-4316538">Linked In</a>
       </li>

templates/navigation.html

 <%page args="active_page" />
 <div class="header-wrapper">
-  <header>
+  <header aria-label="Global Navigation">
     <hgroup>
       <h1><em>
         % if settings.ENABLE_MULTICOURSE:

templates/profile.html

@@ -179,7 +179,7 @@ $(function() {
 
     </section>
 
-    <section class="user-info">
+    <section aria-label="Profile Navigation" class="user-info">
 
       <header>
         <h1>Student Profile</h1>
@@ -189,7 +189,7 @@ $(function() {
         <li>
           Name: <strong>${name}</strong>
           %if True:
-          <a href="#apply_name_change" rel="leanModal" class="name-edit">Edit</a>
+          <a href="#apply_name_change" rel="leanModal" class="name-edit" aria-label="Edit Name">Edit</a>
           %else:
           (Name change pending)
           %endif
@@ -200,18 +200,18 @@ $(function() {
         </li>
 
         <li>
-          E-mail: <strong>${email}</strong> <a href="#change_email" rel="leanModal" class="edit-email">Edit</a>
+          E-mail: <strong>${email}</strong> <a href="#change_email" rel="leanModal" class="edit-email" aria-label="Edit Email">Edit</a>
         </li>
         <li>
-          Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location">Edit</a>
+          Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location" aria-label="Edit Location">Edit</a>
         </li>
         <li>
-          Language: <div id="language_sub">${language}</div> <a href="#" id="change_language">Edit</a>
+          Language: <div id="language_sub">${language}</div> <a href="#" id="change_language" aria-label="Edit Language">Edit</a>
         </li>
         <li>
           Password reset
           <input id="id_email" type="hidden" name="email" maxlength="75" value="${email}" />
-          <input type="submit" id="pwd_reset_button" value="Reset" />
+          <input type="submit" id="pwd_reset_button" value="Reset" aria-label="Reset Password" />
           <p>We'll e-mail a password reset link to ${email}.</p>
         </li>
       </ul>

templates/seq_module.html

-<nav class="sequence-nav">
+<nav aria-label="Section Navigation" class="sequence-nav">
   <ol>
     % for t in range(1,1+len(items)):
     <li><a href="#" class="seq_inactive" id="tt_${ t }"></a></li>
@@ -14,7 +14,7 @@
 <div id="seq_content"></div>
 
 <nav class="sequence-bottom">
-<ul>
+<ul aria-label="Section Navigation">
   <li class="${ id }prev prev"><a href="#">Previous</a></li>
   <li class="${ id }next next"><a href="#">Next</a></li>
 </ul>

templates/simplewiki_base.html

@@ -77,7 +77,7 @@
 <section class="main-content">
   <div class="wiki-wrapper">
     <%block name="wiki_panel">
-    <div id="wiki_panel">
+    <div aria-label="Wiki Navigation" id="wiki_panel">
     <h2>Course Wiki</h2>
       <%
           if (wiki_article is not UNDEFINED):

templates/staticbook.html

@@ -59,7 +59,7 @@ $("#open_close_accordion a").click(function(){
 <section class="main-content">
   <div class="book-wrapper">
 
-    <section class="book-sidebar">
+    <section aria-label="Textbook Navigation" class="book-sidebar">
       <header id="open_close_accordion">
         <h2>Table of Contents</h2>
         <a href="#">close</a>