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() { $(document).ready(function() {
$("form").submit(function(e){ $("form").submit(function(e){
e.preventDefault(); e.preventDefault();
$(".flash").css("color", "#d01543");
$(".flash").css("display", "block"); $(".flash").css("display", "block");
$(".flash")[0].setAttribute("title", "error message");
var success = false;
var msg = "";
var msgColor = "";
var flashId = "";
var ps = $("#ps").val() var ps = $("#ps").val()
var cn = $("#cn").val() var cn = $("#cn").val()
var msg = ""
if (ps === "") { if (ps === "") {
msg = "Password is required." msg = "Password is required."
@@ -53,12 +55,23 @@ $(document).ready(function() {
} else if (!ps.match(/Doha/)) { } else if (!ps.match(/Doha/)) {
msg = "Password must contain name of the capital and largest city of Qatar." msg = "Password must contain name of the capital and largest city of Qatar."
} else { } else {
$(".flash").css("color", "#316767"); success = true;
$(".flash")[0].setAttribute("title", "success message");
msg = "Great! Your registration is complete." 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; return false;
}) })
}); });
View
@@ -15,7 +15,7 @@
<body> <body>
<header></header> <header></header>
<main> <main>
<div class="flash"><h1></h1></div> <div class="flash" tabindex="-1"></div>
<h2>Sign Up Now</h2> <h2>Sign Up Now</h2>
<form> <form>

0 comments on commit e7ff5b1

Please sign in to comment.