Merge pull request #93 from edx/giulio/accessibility

A number of important accessibility changes

lms/djangoapps/courseware/tests/test_masquerade.py

@@ -64,7 +64,7 @@ class TestStaffMasqueradeAsStudent(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>'
-    
+
         self.assertTrue(sdebug in resp.content)
 
 
@@ -84,9 +84,9 @@ class TestStaffMasqueradeAsStudent(LoginEnrollmentTestCase):
 
         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>'
-    
+
         self.assertFalse(sdebug in resp.content)
-        
+
     def get_problem(self):
         pun = 'H1P1'
         problem_location = "i4x://edX/graded/problem/%s" % pun
@@ -105,7 +105,7 @@ class TestStaffMasqueradeAsStudent(LoginEnrollmentTestCase):
         resp = self.get_problem()
         html = json.loads(resp.content)['html']
         print html
-        sabut = '<input class="show" type="button" value="Show Answer">'
+        sabut = '<button class="show"><span class="show-label">Show Answer(s)</span> <span class="sr">(for question(s) above - adjacent to each field)</span></button>'
         self.assertTrue(sabut in html)
 
     def test_no_showanswer_for_student(self):
@@ -116,5 +116,5 @@ class TestStaffMasqueradeAsStudent(LoginEnrollmentTestCase):
         resp = self.get_problem()
         html = json.loads(resp.content)['html']
         print html
-        sabut = '<input class="show" type="button" value="Show Answer">'
+        sabut = '<button class="show"><span class="show-label">Show Answer(s)</span> <span class="sr">(for question(s) above - adjacent to each field)</span></button>'
         self.assertFalse(sabut in html)

lms/static/sass/base/_base.scss

@@ -209,7 +209,7 @@ mark {
 }
 
 .sr {
-  @include text-sr();
+  @extend .text-sr;
 }
 
 .help-tab {

lms/static/sass/base/_mixins.scss

@@ -14,18 +14,6 @@
   overflow: hidden;
 }
 
-// hidden elems - screenreaders
-@mixin text-sr() {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
 @mixin vertically-and-horizontally-centered ( $height, $width ) {
   left: 50%;
   margin-left: -$width / 2;
@@ -49,4 +37,18 @@
 //-----------------
 @mixin login_register_h1_style {}
 
-@mixin footer_references_style {}
+@mixin footer_references_style {}
+
+// ====================
+
+// extends -hidden elems - screenreaders
+.text-sr {
+  border: 0;
+  clip: rect(1px 1px 1px 1px);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  width: 1px;
+}

lms/templates/courseware/accordion.html

@@ -3,14 +3,17 @@
 
 <%def name="make_chapter(chapter)">
   <div class="chapter">
-    <h3 ${' class="active"' if 'active' in chapter and chapter['active'] else ''}><a href="#">${chapter['display_name']}</a>
-    </h3>
+      <h3 ${' class="active"' if 'active' in chapter and chapter['active'] else ''} aria-label="${chapter['display_name']}${', current chapter' if 'active' in chapter and chapter['active'] else ''}">
+        <a href="#">
+          ${chapter['display_name']}
+        </a>
+      </h3>
 
     <ul>
       % for section in chapter['sections']:
           <li class="${'active' if 'active' in section and section['active'] else ''} ${'graded'  if 'graded' in section and section['graded'] else ''}">
             <a href="${reverse('courseware_section', args=[course_id, chapter['url_name'], section['url_name']])}">
-              <p>${section['display_name']}</p>
+              <p>${section['display_name']} ${'<span class="sr">, current section</span>' if 'active' in section and section['active'] else ''}</p>
               <p class="subtitle">${section['format']} ${"due " + get_default_time_display(section['due'], show_timezone) if section.get('due') is not None else ''}</p>
             </a>
           </li>

lms/templates/courseware/course_navigation.html

@@ -20,6 +20,9 @@ def url_class(is_active):
           <li>
              <a href="${tab.link | h}" class="${url_class(tab.is_active)}">
                  ${tab.name | h}
+                 % if tab.is_active == True:
+                  <span class="sr">, current location</span>
+                 %endif
                  % if tab.has_img == True:
                     <img src="${tab.img}"/>
                  %endif

lms/templates/courseware/progress.html

@@ -35,7 +35,7 @@ ${progress_graph.body(grade_summary, course.grade_cutoffs, "grade-detail-graph",
       </header>
 
       %if not course.disable_progress_graph:
-        <div id="grade-detail-graph"></div>
+        <div id="grade-detail-graph" aria-hidden="true"></div>
       %endif
 
       <ol class="chapters">
@@ -54,7 +54,12 @@ ${progress_graph.body(grade_summary, course.grade_cutoffs, "grade-detail-graph",
               %>
 
               <h3><a href="${reverse('courseware_section', kwargs=dict(course_id=course.id, chapter=chapter['url_name'], section=section['url_name']))}">
-                ${ section['display_name'] }</a>
+                ${ section['display_name'] }
+                %if total > 0 or earned > 0:
+                  <span class="sr">
+                    ${"{0:.3n} of {1:.3n} possible points".format( float(earned), float(total) )}
+                  </span></a>
+                %endif
                 %if total > 0 or earned > 0:
                   <span> ${"({0:.3n}/{1:.3n}) {2}".format( float(earned), float(total), percentageString )}</span>
                 %endif

lms/templates/login.html

@@ -86,7 +86,7 @@
 
 <section class="login container">
   <section role="main" class="content">
-    <form role="form" id="login-form" method="post" data-remote="true" action="/login_ajax">
+    <form role="form" id="login-form" method="post" data-remote="true" action="/login_ajax" novalidate>
 
       <!-- status messages -->
       <div role="alert" class="status message">
@@ -111,11 +111,11 @@
         <ol class="list-input">
           <li class="field required text" id="field-email">
             <label for="email">E-mail</label>
-            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" />
+            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" required aria-required="true" />
           </li>
           <li class="field required password" id="field-password">
             <label for="password">Password</label>
-            <input id="password" type="password" name="password" value="" />
+            <input id="password" type="password" name="password" value="" required aria-required="true" />
             <span class="tip tip-input">
               <a href="#forgot-password-modal" rel="leanModal" class="pwd-reset action action-forgotpw">Forgot password?</a>
             </span>

lms/templates/navigation.html

@@ -65,11 +65,11 @@ site_status_msg = get_site_status_msg(course_id)
       <li class="primary">
         <a href="${reverse('dashboard')}" class="user-link">
           <span class="avatar"></span>
-          ${user.username}
+          <span class="sr">Dashboard for: </span> ${user.username}
         </a>
       </li>
       <li class="primary">
-        <a href="#" class="dropdown">&#9662</a>
+        <a href="#" class="dropdown"><span class="sr">More options dropdown</span> &#9662</a>
         <ul class="dropdown-menu">
           <%block name="navigation_dropdown_menu_links" >
             <li><a href="${marketing_link('FAQ')}">Help</a></li>

lms/templates/problem.html

@@ -10,19 +10,19 @@
   ${ problem['html'] }
 
   <section class="action">
-    <input type="hidden" name="problem_id" value="${ problem['name'] }">
+    <input type="hidden" name="problem_id" value="${ problem['name'] }" />
 
     % if check_button:
-    <input class="check ${ check_button }" type="button" value="${ check_button }">
+    <input class="check ${ check_button }" type="button" value="${ check_button }" />
     % endif
     % if reset_button:
-    <input class="reset" type="button" value="Reset">
+    <input class="reset" type="button" value="Reset" />
     % endif
     % if save_button:
-    <input class="save" type="button" value="Save">
+    <input class="save" type="button" value="Save" />
     % endif
     % if answer_available:
-    <input class="show" type="button" value="Show Answer">
+    <button class="show"><span class="show-label">Show Answer(s)</span> <span class="sr">(for question(s) above - adjacent to each field)</span></button>
     % endif
     % if attempts_allowed :
     <section class="submission_feedback">

lms/templates/register.html

@@ -89,7 +89,7 @@
 
 <section class="register container">
   <section role="main" class="content">
-    <form role="form" id="register-form" method="post" data-remote="true" action="/create_account">
+    <form role="form" id="register-form" method="post" data-remote="true" action="/create_account" novalidate>
 
       <!-- status messages -->
       <div role="alert" class="status message">
@@ -115,20 +115,20 @@
         <ol class="list-input">
           <li class="field required text" id="field-email">
             <label for="email">E-mail</label>
-            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" />
+            <input class="" id="email" type="email" name="email" value="" placeholder="example: username@domain.com" required aria-required="true" />
           </li>
           <li class="field required password" id="field-password">
             <label for="password">Password</label>
-            <input id="password" type="password" name="password" value="" />
+            <input id="password" type="password" name="password" value="" required aria-required="true" />
           </li>
           <li class="field required text" id="field-username">
             <label for="username">Public Username</label>
-            <input id="username" type="text" name="username" value="" placeholder="example: JaneDoe" />
+            <input id="username" type="text" name="username" value="" placeholder="example: JaneDoe" required aria-required="true" />
             <span class="tip tip-input">Will be shown in any discussions or forums you participate in</span>
           </li>
           <li class="field required text" id="field-name">
             <label for="name">Full Name</label>
-            <input id="name" type="text" name="name" value="" placeholder="example: Jane Doe" />
+            <input id="name" type="text" name="name" value="" placeholder="example: Jane Doe" required aria-required="true" />
             <span class="tip tip-input">Needed for any certificates you may earn <strong>(cannot be changed later)</strong></span>
           </li>
         </ol>
@@ -143,7 +143,7 @@
         <ol class="list-input">
           <li class="field required text" id="field-username">
             <label for="username">Public Username</label>
-            <input id="username" type="text" name="username" value="${extauth_username}" placeholder="example: JaneDoe" />
+            <input id="username" type="text" name="username" value="${extauth_username}" placeholder="example: JaneDoe" required aria-required="true" />
             <span class="tip tip-input">Will be shown in any discussions or forums you participate in</span>
           </li>
         </ol>
@@ -211,7 +211,7 @@
         <ol class="list-input">
           <li class="field-group">
             <div class="field required checkbox" id="field-tos">
-              <input id="tos-yes" type="checkbox" name="terms_of_service" value="true" />
+              <input id="tos-yes" type="checkbox" name="terms_of_service" value="true" required aria-required="true" />
               <label for="tos-yes">I agree to the <a href="${marketing_link('TOS')}" class="new-vp">Terms of Service</a></label>
             </div>
 

lms/templates/seq_module.html

@@ -1,5 +1,9 @@
 <div id="sequence_${element_id}" class="sequence" data-id="${item_id}" data-position="${position}" data-course_modx_root="/course/modx" >
   <nav aria-label="Section Navigation" class="sequence-nav">
+    <ul class="sequence-nav-buttons">
+      <li class="prev"><a href="#">Previous</a></li>
+    </ul>
+    
     <div class="sequence-list-wrapper">
       <ol id="sequence-list">
         % for idx, item in enumerate(items):
@@ -20,7 +24,6 @@
     </div>
 
     <ul class="sequence-nav-buttons">
-      <li class="prev"><a href="#">Previous</a></li>
       <li class="next"><a href="#">Next</a></li>
     </ul>
   </nav>