From 2dde742f383359a8da88f22538d405b5b986eaf7 Mon Sep 17 00:00:00 2001
From: Giulio Gratta <giulio@giuliogratta.com>
Date: Thu, 2 May 2013 10:45:26 -0700
Subject: [PATCH 1/6] made login form labels and close modal button accessible
 friendly

---
 lms/static/sass/shared/_modal.scss |  2 +-
 lms/templates/login_modal.html     | 19 +++++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/lms/static/sass/shared/_modal.scss b/lms/static/sass/shared/_modal.scss
index bfa803fee2..2bd0dd18c8 100644
--- a/lms/static/sass/shared/_modal.scss
+++ b/lms/static/sass/shared/_modal.scss
@@ -149,7 +149,7 @@
       }
 
       label {
-        color: #999;
+        color: #646464;
 
         &.field-error {
           display: block;
diff --git a/lms/templates/login_modal.html b/lms/templates/login_modal.html
index 1587cca767..4bd887a248 100644
--- a/lms/templates/login_modal.html
+++ b/lms/templates/login_modal.html
@@ -9,14 +9,17 @@
     </header>
 
     <form id="login_form" class="login_form" method="post" data-remote="true" action="/login">
-      <label>E-mail</label>
-      <input name="email" type="email">
-      <label>Password</label>
-      <input name="password" type="password">
-      <label class="remember-me">
-        <input name="remember" type="checkbox" value="true">
+      <label for="login_email">E-mail</label>
+        <input id="login_email" type="email" name="email" placeholder="e.g. jane.doe@email.com" />
+      
+      <label for="login_password">Password</label>
+        <input id="login_password" type="password" name="password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;" />  
+      
+      <label for="login_remember_me" class="remember-me">
+        <input id="login_remember_me" type="checkbox" name="remember" value="true" />
         Remember me
       </label>
+      
       <div class="submit">
         <input name="submit" type="submit" value="Access My Courses">
       </div>
@@ -34,11 +37,11 @@
 % endif
     </section>
 
-    <div class="close-modal">
+    <a href="javascript:void(0);" class="close-modal" title="Close Modal">
       <div class="inner">
         <p>&#10005;</p>
       </div>
-    </div>
+    </a>
   </div>
 </section>
 

From 3eac9376dd8f766953b70cad46d660281ab4a2db Mon Sep 17 00:00:00 2001
From: Giulio Gratta <giulio@giuliogratta.com>
Date: Thu, 2 May 2013 11:18:56 -0700
Subject: [PATCH 2/6] made forgot password form close modal button accessible
 friendly

---
 lms/templates/forgot_password_modal.html | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/lms/templates/forgot_password_modal.html b/lms/templates/forgot_password_modal.html
index 97b41d4be9..cf4fe77bee 100644
--- a/lms/templates/forgot_password_modal.html
+++ b/lms/templates/forgot_password_modal.html
@@ -12,19 +12,19 @@
       </div>
 
       <form id="pwd_reset_form" action="${reverse('password_reset')}" method="post" data-remote="true">
-        <label for="id_email">E-mail address:</label>
-        <input id="id_email" type="email" name="email" maxlength="75" placeholder="Your E-mail"/>
+        <label for="pwd_reset_email">E-mail address:</label>
+        <input id="pwd_reset_email" type="email" name="email" maxlength="75" placeholder="Your E-mail"/>
         <div class="submit">
           <input type="submit" id="pwd_reset_button" value="Reset my password" />
         </div>
       </form>
     </div>
 
-    <div class="close-modal">
+    <a href="javascript:void(0);" class="close-modal" title="Close Modal">
       <div class="inner">
         <p>&#10005;</p>
       </div>
-    </div>
+    </a>
   </div>
 </section>
 

From a266330b2dcb2c70a15e1cd25c0b68f3fa143cbf Mon Sep 17 00:00:00 2001
From: Giulio Gratta <giulio@giuliogratta.com>
Date: Thu, 2 May 2013 12:02:29 -0700
Subject: [PATCH 3/6] made signup form labels and close modal button accessible
 friendly and tweaked login form to match signup form

---
 lms/templates/login_modal.html  |  2 +-
 lms/templates/signup_modal.html | 57 ++++++++++++++++++---------------
 2 files changed, 32 insertions(+), 27 deletions(-)

diff --git a/lms/templates/login_modal.html b/lms/templates/login_modal.html
index 4bd887a248..b6e3c47e00 100644
--- a/lms/templates/login_modal.html
+++ b/lms/templates/login_modal.html
@@ -10,7 +10,7 @@
 
     <form id="login_form" class="login_form" method="post" data-remote="true" action="/login">
       <label for="login_email">E-mail</label>
-        <input id="login_email" type="email" name="email" placeholder="e.g. jane.doe@email.com" />
+        <input id="login_email" type="email" name="email" placeholder="e.g. yourname@domain.com" />
       
       <label for="login_password">Password</label>
         <input id="login_password" type="password" name="password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;" />  
diff --git a/lms/templates/signup_modal.html b/lms/templates/signup_modal.html
index 9224ccc0b4..daab1d04ef 100644
--- a/lms/templates/signup_modal.html
+++ b/lms/templates/signup_modal.html
@@ -20,27 +20,31 @@
 
         <div class="input-group">
 	  % if has_extauth_info is UNDEFINED:
-          <label data-field="email">E-mail*</label>
-          <input name="email" type="email" placeholder="eg. yourname@domain.com">
-          <label data-field="password">Password*</label>
-          <input name="password" type="password" placeholder="****">
-          <label data-field="username">Public Username*</label>
-          <input name="username" type="text" placeholder="Shown on forums">
-          <label data-field="name">Full Name*</label>
-          <input name="name" type="text" placeholder="For your certificate">
+          <label data-field="email" for="signup_email">E-mail *</label>
+	    <input id="signup_email" type="email" name="email" placeholder="e.g. yourname@domain.com" required />
+	  
+          <label data-field="password" for="signup_password">Password *</label>
+	    <input id="signup_password" type="password" name="password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;" required />
+          
+	  <label data-field="username" for="signup_username">Public Username *</label>
+	    <input id="signup_username" type="text" name="username" placeholder="e.g. yourname (shown on forums)" required />
+	  
+          <label data-field="name" for="signup_fullname">Full Name *</label>
+	    <input id="signup_fullname" type="text" name="name" placeholder="e.g. Your Name (for certificates)" required />
 	  % else:
 	  <p><i>Welcome</i> ${extauth_email}</p><br/>
 	  <p><i>Enter a public username:</i></p>
-          <label data-field="username">Public Username*</label>
-          <input name="username" type="text" value="${extauth_username}" placeholder="Shown on forums">
+	  
+          <label data-field="username" for="signup_username">Public Username *</label>
+	    <input id="signup_username" type="text" name="username" value="${extauth_username}" placeholder="e.g. yourname (shown on forums)" required />
 	  % endif
         </div>
 
         <div class="input-group">
           <section class="citizenship">
-            <label data-field="level_of_education">Ed. completed</label>
+            <label data-field="level_of_education" for="signup_ed_level">Ed. Completed</label>
             <div class="input-wrapper">
-              <select name="level_of_education">
+              <select id="signup_ed_level" name="level_of_education">
                   <option value="">--</option>
                   %for code, ed_level in UserProfile.LEVEL_OF_EDUCATION_CHOICES:
                       <option value="${code}">${ed_level}</option>
@@ -50,9 +54,9 @@
           </section>
 
           <section class="gender">
-            <label data-field="gender">Gender</label>
+            <label data-field="gender" for="signup_gender">Gender</label>
             <div class="input-wrapper">
-              <select name="gender">
+              <select id="signup_gender" name="gender">
                   <option value="">--</option>
                   %for code, gender in UserProfile.GENDER_CHOICES:
                       <option value="${code}">${gender}</option>
@@ -62,9 +66,9 @@
           </section>
 
           <section class="date-of-birth">
-            <label data-field="date-of-birth">Year of birth</label>
+            <label data-field="date-of-birth" for="signup_birth_year">Year of birth</label>
             <div class="input-wrapper">
-              <select name="year_of_birth">
+              <select id="signup_birth_year" name="year_of_birth">
                 <option value="">--</option>
                 %for year in UserProfile.VALID_YEARS:
                   <option value="${year}">${year}</option>
@@ -74,22 +78,23 @@
             </div>
           </section>
 
-          <label data-field="mailing_address">Mailing address</label>
-          <textarea name="mailing_address"></textarea>
-          <label data-field="goals">Goals in signing up for edX</label>
-          <textarea name="goals"></textarea>
+          <label data-field="mailing_address" for="signup_mailing_address">Mailing address</label>
+	    <textarea id="signup_mailing_address" name="mailing_address"></textarea>
+	  
+          <label data-field="goals" for="signup_goals">Goals in signing up for edX</label>
+	    <textarea name="goals" id="signup_goals"></textarea>
 
         </div>
 
         <div class="input-group">
-          <label data-field="terms_of_service" class="terms-of-service">
-            <input name="terms_of_service" type="checkbox" value="true">
+          <label data-field="terms_of_service" class="terms-of-service" for="signup_tos">
+            <input id="signup_tos" name="terms_of_service" type="checkbox" value="true">
             I agree to the
             <a href="${reverse('tos')}" target="_blank">Terms of Service</a>*
           </label>
 
-          <label data-field="honor_code" class="honor-code">
-            <input name="honor_code" type="checkbox" value="true">
+          <label data-field="honor_code" class="honor-code" for="signup_honor">
+            <input id="signup_honor" name="honor_code" type="checkbox" value="true">
             I agree to the
             <a href="${reverse('honor')}" target="_blank">Honor Code</a>*
           </label>
@@ -110,11 +115,11 @@
 
     </div>
 
-    <div class="close-modal">
+    <a href="javascript:void(0);" class="close-modal" title="Close Modal">
       <div class="inner">
         <p>&#10005;</p>
       </div>
-    </div>
+    </a>
   </div>
 </section>
 

From 953af59b0da56990ade4f0add2892685b6d24360 Mon Sep 17 00:00:00 2001
From: Giulio Gratta <giulio@giuliogratta.com>
Date: Fri, 3 May 2013 14:21:42 -0700
Subject: [PATCH 4/6] fixing some more LMS accessibility issues

---
 lms/templates/courseware/courseware.html | 6 +++---
 lms/templates/seq_module.html            | 3 ++-
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/lms/templates/courseware/courseware.html b/lms/templates/courseware/courseware.html
index 33dc9562a7..4889da25ca 100644
--- a/lms/templates/courseware/courseware.html
+++ b/lms/templates/courseware/courseware.html
@@ -156,7 +156,7 @@
         <div id="calculator_wrapper">
             <form id="calculator">
                 <div class="input-wrapper">
-                    <input type="text" id="calculator_input" />
+                    <input type="text" id="calculator_input" title="Calculator Input Field" />
 
                     <div class="help-wrapper">
                         <a href="#">Hints</a>
@@ -176,8 +176,8 @@
                         </dl>
                     </div>
                 </div>
-                <input id="calculator_button" type="submit" value="="/>
-                <input type="text" id="calculator_output"  readonly />
+                <input id="calculator_button" type="submit" title="Calculate" value="="/>
+                <input type="text" id="calculator_output" title="Calculator Output Field" readonly />
             </form>
 
         </div>
diff --git a/lms/templates/seq_module.html b/lms/templates/seq_module.html
index cfacfa92c8..304e7834f1 100644
--- a/lms/templates/seq_module.html
+++ b/lms/templates/seq_module.html
@@ -10,7 +10,8 @@
         <li>
         <a class="seq_${item['type']} inactive progress-${item['progress_status']}"
            data-id="${item['id']}"
-           data-element="${idx+1}">
+           data-element="${idx+1}"
+           href="javascript:void(0);">
             <p>${item['title']}</p>
           </a>
         </li>

From f7719a60c791d01c5c82e42ac591475c5b92f005 Mon Sep 17 00:00:00 2001
From: Giulio Gratta <giulio@giuliogratta.com>
Date: Tue, 7 May 2013 11:20:47 -0700
Subject: [PATCH 5/6] changed offending javascript:void() hrefs on anchors to
 preventDefault()

---
 lms/templates/forgot_password_modal.html | 2 +-
 lms/templates/login_modal.html           | 2 +-
 lms/templates/signup_modal.html          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/lms/templates/forgot_password_modal.html b/lms/templates/forgot_password_modal.html
index cf4fe77bee..70467d2dd0 100644
--- a/lms/templates/forgot_password_modal.html
+++ b/lms/templates/forgot_password_modal.html
@@ -20,7 +20,7 @@
       </form>
     </div>
 
-    <a href="javascript:void(0);" class="close-modal" title="Close Modal">
+    <a href="preventDefault();" class="close-modal" title="Close Modal">
       <div class="inner">
         <p>&#10005;</p>
       </div>
diff --git a/lms/templates/login_modal.html b/lms/templates/login_modal.html
index b6e3c47e00..4c190bf024 100644
--- a/lms/templates/login_modal.html
+++ b/lms/templates/login_modal.html
@@ -37,7 +37,7 @@
 % endif
     </section>
 
-    <a href="javascript:void(0);" class="close-modal" title="Close Modal">
+    <a href="preventDefault();" class="close-modal" title="Close Modal">
       <div class="inner">
         <p>&#10005;</p>
       </div>
diff --git a/lms/templates/signup_modal.html b/lms/templates/signup_modal.html
index daab1d04ef..fd3b0bb902 100644
--- a/lms/templates/signup_modal.html
+++ b/lms/templates/signup_modal.html
@@ -115,7 +115,7 @@
 
     </div>
 
-    <a href="javascript:void(0);" class="close-modal" title="Close Modal">
+    <a href="preventDefault();" class="close-modal" title="Close Modal">
       <div class="inner">
         <p>&#10005;</p>
       </div>

From 91e2a39ec70dfb0775c5f4f43d59b78b6454281a Mon Sep 17 00:00:00 2001
From: Giulio Gratta <giulio@giuliogratta.com>
Date: Tue, 7 May 2013 12:50:59 -0700
Subject: [PATCH 6/6] moving preventDefault() statements to the local script
 tag

---
 lms/templates/forgot_password_modal.html | 7 ++++++-
 lms/templates/login_modal.html           | 7 ++++++-
 lms/templates/signup_modal.html          | 7 ++++++-
 3 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/lms/templates/forgot_password_modal.html b/lms/templates/forgot_password_modal.html
index 70467d2dd0..f0f571a817 100644
--- a/lms/templates/forgot_password_modal.html
+++ b/lms/templates/forgot_password_modal.html
@@ -20,7 +20,7 @@
       </form>
     </div>
 
-    <a href="preventDefault();" class="close-modal" title="Close Modal">
+    <a href="#" class="close-modal" title="Close Modal">
       <div class="inner">
         <p>&#10005;</p>
       </div>
@@ -40,5 +40,10 @@
        $('#pwd_error').stop().css("display", "block");
      }
    });
+   
+   // removing close link's default behavior
+   $('#login-modal .close-modal').click(function(e) {
+    e.preventDefault();
+   });
   })(this)
 </script>
diff --git a/lms/templates/login_modal.html b/lms/templates/login_modal.html
index 4c190bf024..de1c437caf 100644
--- a/lms/templates/login_modal.html
+++ b/lms/templates/login_modal.html
@@ -37,7 +37,7 @@
 % endif
     </section>
 
-    <a href="preventDefault();" class="close-modal" title="Close Modal">
+    <a href="#" class="close-modal" title="Close Modal">
       <div class="inner">
         <p>&#10005;</p>
       </div>
@@ -62,5 +62,10 @@
        $('#login_error').html(json.value).stop().css("display", "block");
      }
    });
+   
+   // removing close link's default behavior
+   $('#login-modal .close-modal').click(function(e) {
+    e.preventDefault();
+   });
 })(this)
 </script>
diff --git a/lms/templates/signup_modal.html b/lms/templates/signup_modal.html
index fd3b0bb902..a68e36e902 100644
--- a/lms/templates/signup_modal.html
+++ b/lms/templates/signup_modal.html
@@ -115,7 +115,7 @@
 
     </div>
 
-    <a href="preventDefault();" class="close-modal" title="Close Modal">
+    <a href="#" class="close-modal" title="Close Modal">
       <div class="inner">
         <p>&#10005;</p>
       </div>
@@ -134,5 +134,10 @@
        $("[data-field='"+json.field+"']").addClass('field-error')
      }
     });
+   
+   // removing close link's default behavior
+   $('#login-modal .close-modal').click(function(e) {
+    e.preventDefault();
+   });
   })(this)
 </script>