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

…or accessibility.
common-nighthawk · Sep 22, 2016 · e7ff5b1 · e7ff5b1
1 parent 81c1314
commit e7ff5b1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/assets/script.js b/assets/script.js
@@ -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;
   })
 });
diff --git a/sign-up-now.html b/sign-up-now.html
@@ -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>