Skip to content

E
edx-platform
Commit fe5fc448 by caesar2164
Options

Merge pull request #1948 from edx/feature/giulio/accessibility 

Feature/giulio/accessibility
parents 729ca900 91e2a39e
Showing with 67 additions and 43 deletions
lms/static/sass/shared/_modal.scss
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
} }
label { label {
color: #999; color: #646464;
&.field-error { &.field-error {
display: block; display: block;
......
lms/templates/courseware/courseware.html
...@@ -156,7 +156,7 @@ ...@@ -156,7 +156,7 @@
<div id="calculator_wrapper"> <div id="calculator_wrapper">
<form id="calculator"> <form id="calculator">
<div class="input-wrapper"> <div class="input-wrapper">
<input type="text" id="calculator_input" /> <input type="text" id="calculator_input" title="Calculator Input Field" />
<div class="help-wrapper"> <div class="help-wrapper">
<a href="#">Hints</a> <a href="#">Hints</a>
...@@ -176,8 +176,8 @@ ...@@ -176,8 +176,8 @@
</dl> </dl>
</div> </div>
</div> </div>
<input id="calculator_button" type="submit" value="="/> <input id="calculator_button" type="submit" title="Calculate" value="="/>
<input type="text" id="calculator_output" readonly /> <input type="text" id="calculator_output" title="Calculator Output Field" readonly />
</form> </form>
</div> </div>
......
lms/templates/forgot_password_modal.html
...@@ -12,19 +12,19 @@ ...@@ -12,19 +12,19 @@
</div> </div>
<form id="pwd_reset_form" action="${reverse('password_reset')}" method="post" data-remote="true"> <form id="pwd_reset_form" action="${reverse('password_reset')}" method="post" data-remote="true">
<label for="id_email">E-mail address:</label> <label for="pwd_reset_email">E-mail address:</label>
<input id="id_email" type="email" name="email" maxlength="75" placeholder="Your E-mail"/> <input id="pwd_reset_email" type="email" name="email" maxlength="75" placeholder="Your E-mail"/>
<div class="submit"> <div class="submit">
<input type="submit" id="pwd_reset_button" value="Reset my password" /> <input type="submit" id="pwd_reset_button" value="Reset my password" />
</div> </div>
</form> </form>
</div> </div>
<div class="close-modal"> <a href="#" class="close-modal" title="Close Modal">
<div class="inner"> <div class="inner">
<p>&#10005;</p> <p>&#10005;</p>
</div> </div>
</div> </a>
</div> </div>
</section> </section>
...@@ -40,5 +40,10 @@ ...@@ -40,5 +40,10 @@
$('#pwd_error').stop().css("display", "block"); $('#pwd_error').stop().css("display", "block");
} }
}); });
// removing close link's default behavior
$('#login-modal .close-modal').click(function(e) {
e.preventDefault();
});
})(this) })(this)
</script> </script>
lms/templates/login_modal.html
...@@ -9,14 +9,17 @@ ...@@ -9,14 +9,17 @@
</header> </header>
<form id="login_form" class="login_form" method="post" data-remote="true" action="/login"> <form id="login_form" class="login_form" method="post" data-remote="true" action="/login">
<label>E-mail</label> <label for="login_email">E-mail</label>
<input name="email" type="email"> <input id="login_email" type="email" name="email" placeholder="e.g. yourname@domain.com" />
<label>Password</label>
<input name="password" type="password"> <label for="login_password">Password</label>
<label class="remember-me"> <input id="login_password" type="password" name="password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;" />
<input name="remember" type="checkbox" value="true">
<label for="login_remember_me" class="remember-me">
<input id="login_remember_me" type="checkbox" name="remember" value="true" />
Remember me Remember me
</label> </label>
<div class="submit"> <div class="submit">
<input name="submit" type="submit" value="Access My Courses"> <input name="submit" type="submit" value="Access My Courses">
</div> </div>
...@@ -34,11 +37,11 @@ ...@@ -34,11 +37,11 @@
% endif % endif
</section> </section>
<div class="close-modal"> <a href="#" class="close-modal" title="Close Modal">
<div class="inner"> <div class="inner">
<p>&#10005;</p> <p>&#10005;</p>
</div> </div>
</div> </a>
</div> </div>
</section> </section>
...@@ -59,5 +62,10 @@ ...@@ -59,5 +62,10 @@
$('#login_error').html(json.value).stop().css("display", "block"); $('#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) })(this)
</script> </script>
lms/templates/seq_module.html
...@@ -10,7 +10,8 @@ ...@@ -10,7 +10,8 @@
<li> <li>
<a class="seq_${item['type']} inactive progress-${item['progress_status']}" <a class="seq_${item['type']} inactive progress-${item['progress_status']}"
data-id="${item['id']}" data-id="${item['id']}"
data-element="${idx+1}"> data-element="${idx+1}"
href="javascript:void(0);">
<p>${item['title']}</p> <p>${item['title']}</p>
</a> </a>
</li> </li>
......
lms/templates/signup_modal.html
...@@ -20,27 +20,31 @@ ...@@ -20,27 +20,31 @@
<div class="input-group"> <div class="input-group">
% if has_extauth_info is UNDEFINED: % if has_extauth_info is UNDEFINED:
<label data-field="email">E-mail*</label> <label data-field="email" for="signup_email">E-mail *</label>
<input name="email" type="email" placeholder="eg. yourname@domain.com"> <input id="signup_email" type="email" name="email" placeholder="e.g. yourname@domain.com" required />
<label data-field="password">Password*</label>
<input name="password" type="password" placeholder="****"> <label data-field="password" for="signup_password">Password *</label>
<label data-field="username">Public Username*</label> <input id="signup_password" type="password" name="password" placeholder="&bull;&bull;&bull;&bull;&bull;&bull;&bull;&bull;" required />
<input name="username" type="text" placeholder="Shown on forums">
<label data-field="name">Full Name*</label> <label data-field="username" for="signup_username">Public Username *</label>
<input name="name" type="text" placeholder="For your certificate"> <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: % else:
<p><i>Welcome</i> ${extauth_email}</p><br/> <p><i>Welcome</i> ${extauth_email}</p><br/>
<p><i>Enter a public username:</i></p> <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 % endif
</div> </div>
<div class="input-group"> <div class="input-group">
<section class="citizenship"> <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"> <div class="input-wrapper">
<select name="level_of_education"> <select id="signup_ed_level" name="level_of_education">
<option value="">--</option> <option value="">--</option>
%for code, ed_level in UserProfile.LEVEL_OF_EDUCATION_CHOICES: %for code, ed_level in UserProfile.LEVEL_OF_EDUCATION_CHOICES:
<option value="${code}">${ed_level}</option> <option value="${code}">${ed_level}</option>
...@@ -50,9 +54,9 @@ ...@@ -50,9 +54,9 @@
</section> </section>
<section class="gender"> <section class="gender">
<label data-field="gender">Gender</label> <label data-field="gender" for="signup_gender">Gender</label>
<div class="input-wrapper"> <div class="input-wrapper">
<select name="gender"> <select id="signup_gender" name="gender">
<option value="">--</option> <option value="">--</option>
%for code, gender in UserProfile.GENDER_CHOICES: %for code, gender in UserProfile.GENDER_CHOICES:
<option value="${code}">${gender}</option> <option value="${code}">${gender}</option>
...@@ -62,9 +66,9 @@ ...@@ -62,9 +66,9 @@
</section> </section>
<section class="date-of-birth"> <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"> <div class="input-wrapper">
<select name="year_of_birth"> <select id="signup_birth_year" name="year_of_birth">
<option value="">--</option> <option value="">--</option>
%for year in UserProfile.VALID_YEARS: %for year in UserProfile.VALID_YEARS:
<option value="${year}">${year}</option> <option value="${year}">${year}</option>
...@@ -74,22 +78,23 @@ ...@@ -74,22 +78,23 @@
</div> </div>
</section> </section>
<label data-field="mailing_address">Mailing address</label> <label data-field="mailing_address" for="signup_mailing_address">Mailing address</label>
<textarea name="mailing_address"></textarea> <textarea id="signup_mailing_address" name="mailing_address"></textarea>
<label data-field="goals">Goals in signing up for edX</label>
<textarea name="goals"></textarea> <label data-field="goals" for="signup_goals">Goals in signing up for edX</label>
<textarea name="goals" id="signup_goals"></textarea>
</div> </div>
<div class="input-group"> <div class="input-group">
<label data-field="terms_of_service" class="terms-of-service"> <label data-field="terms_of_service" class="terms-of-service" for="signup_tos">
<input name="terms_of_service" type="checkbox" value="true"> <input id="signup_tos" name="terms_of_service" type="checkbox" value="true">
I agree to the I agree to the
<a href="${reverse('tos')}" target="_blank">Terms of Service</a>* <a href="${reverse('tos')}" target="_blank">Terms of Service</a>*
</label> </label>
<label data-field="honor_code" class="honor-code"> <label data-field="honor_code" class="honor-code" for="signup_honor">
<input name="honor_code" type="checkbox" value="true"> <input id="signup_honor" name="honor_code" type="checkbox" value="true">
I agree to the I agree to the
<a href="${reverse('honor')}" target="_blank">Honor Code</a>* <a href="${reverse('honor')}" target="_blank">Honor Code</a>*
</label> </label>
...@@ -110,11 +115,11 @@ ...@@ -110,11 +115,11 @@
</div> </div>
<div class="close-modal"> <a href="#" class="close-modal" title="Close Modal">
<div class="inner"> <div class="inner">
<p>&#10005;</p> <p>&#10005;</p>
</div> </div>
</div> </a>
</div> </div>
</section> </section>
...@@ -129,5 +134,10 @@ ...@@ -129,5 +134,10 @@
$("[data-field='"+json.field+"']").addClass('field-error') $("[data-field='"+json.field+"']").addClass('field-error')
} }
}); });
// removing close link's default behavior
$('#login-modal .close-modal').click(function(e) {
e.preventDefault();
});
})(this) })(this)
</script> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment