Permalink
Browse files

adds aria-describedby to password field to properly announce errors f…

…or accessibility.
  • Loading branch information...
common-nighthawk committed Sep 22, 2016
1 parent 81c1314 commit e7ff5b104bebc04311e8ef1519ce8272e6d763dc
Showing with 20 additions and 7 deletions.
  1. +19 −6 assets/script.js
  2. +1 −1 sign-up-now.html
View
@@ -1,13 +1,15 @@
$(document).ready(function() {
$("form").submit(function(e){
e.preventDefault();
$(".flash").css("color", "#d01543");
$(".flash").css("display", "block");
$(".flash")[0].setAttribute("title", "error message");
var success = false;
var msg = "";
var msgColor = "";
var flashId = "";
var ps = $("#ps").val()
var cn = $("#cn").val()
var msg = ""
if (ps === "") {
msg = "Password is required."
@@ -53,12 +55,23 @@ $(document).ready(function() {
} else if (!ps.match(/Doha/)) {
msg = "Password must contain name of the capital and largest city of Qatar."
} else {
$(".flash").css("color", "#316767");
$(".flash")[0].setAttribute("title", "success message");
success = true;
msg = "Great! Your registration is complete."
}
$(".flash h1").html(msg);
if (success) {
msgColor = "#316767";
flashId = "password-success";
} else {
msgColor = "#d01543";
flashId = "password-error";
}
$(".flash").css("color", msgColor);
$(".flash").attr("id", flashId);
$("#ps")[0].setAttribute("aria-describedby", flashId);
$(".flash").html("<h1>"+msg+"</h1>");
$(".flash").focus()
return false;
})
});
View
@@ -15,7 +15,7 @@
<body>
<header></header>
<main>
<div class="flash"><h1></h1></div>
<div class="flash" tabindex="-1"></div>
<h2>Sign Up Now</h2>
<form>

0 comments on commit e7ff5b1

Please sign in to comment.