Permalink
Browse files

Updating for accessibility.

Adding labels, using more semantic markup.

issue #92
  • Loading branch information...
shane-tomlinson committed Jul 20, 2011
1 parent d001098 commit 86ca2863ba648ab2f9ccd08454f042086fd97b00
@@ -20,7 +20,7 @@ span.sitename, span.email {
font-weight: bold;
}
-.dialog .title {
+.dialog h2 {
font-size: 2em;
font-weight: bold;
margin: auto;
@@ -141,9 +141,8 @@ div.input > * {
float: left;
}
-div.input > div.note {
- float: right;
- margin-top: .7em;
+div.note {
+ display: inline
}
div.content {
@@ -153,7 +152,7 @@ div.content {
text-align: left;
}
-div.content > div.input {
+div.content > div.input, .formRow {
height: 3em;
font-size: .8em;
}
@@ -163,13 +162,13 @@ div.content > div.summary {
margin-bottom: 2em;
}
-div.content > div.input > div.label {
+.formRow > label {
width: 80px;
text-align: left;
- margin-top: .7em;
+ display: inline-block;
}
-div.input input {
+.formRow input {
border: 1px solid black;
width: 240px;
height: 2em;
@@ -1,9 +1,9 @@
- <div class="title"> Add a new email address </div>
+ <h2> Add a new email address </h2>
<div class="content">
<div class="summary">Setting up a up a new email address is easy, tell us what it is and we'll get started:</div>
- <div class="input">
- <div class="label"> Email </div>
- <div class="input"> <input type="text" id="email_input"></input></div>
+ <div class="formRow">
+ <label for="email_input">Email</label>
+ <input type="text" id="email_input"></input>
<div class="note"></div>
</div>
</div>
@@ -1,13 +1,13 @@
<div class="content">
<p class="prompt">Signing into <span class="sitename bad"><%= sitename %></span>:</p>
- <div class="input">
- <div class="label"> Email </div>
- <div class="input"> <input type="text" id="email_input"></input></div>
+ <div class="formRow">
+ <label for="email_input"> Email </label>
+ <input type="text" id="email_input" />
</div>
- <div class="input">
- <div class="label"> Password </div>
- <div class="input"> <input type="password" id="password_input"></input></div>
- <div class="note"> <a href="#" id="forgotpassword">I forgot my password</a> </div>
+ <div class="formRow">
+ <label for="password_input"> Password </label>
+ <input type="password" id="password_input" />
+ <a href="#" id="forgotpassword">I forgot my password</a>
</div>
<div class="attention_lame" id="nosuchaccount" style="display:none;">
No such account exists with that email and/or password
@@ -1,4 +1,4 @@
- <div class="title"> Confirm Your Email </div>
+ <h2> Confirm Your Email </h2>
<div class="content">
<div class="summary">Welcome, <span class="email good"><%= email %></span>. You will receive a <strong>confirmation email</strong> in a few moments. To activate your BrowserID, please <strong>visit the link</strong> included in the email.</div>
<div class="attention" id="waiting_confirmation">
@@ -1,21 +1,23 @@
<div class="content">
<div class="summary">BrowserID makes signing in <b>safer and easier</b>. To begin, please provide an email address and pick a password:</div>
- <div class="input">
- <div class="label"> Email </div>
- <div class="input"> <input id="email_input" type="text"></input></div>
- <div class="note" id="email_input_note" style="display:none;"><span class="good">Not registered</span></div>
+ <div class="formRow">
+ <label for="email_input"> Email </label>
+ <input id="email_input" type="email"/>
+ <span class="note" id="email_input_note" style="display:none;">
+ <span class="good">Not registered</span>
+ </span>
</div>
- <div class="input">
- <div class="label"> Password </div>
- <div class="input"> <input id="password_input" type="password"></input></div>
+ <div class="formRow">
+ <label for="password_input"> Password </label>
+ <input id="password_input" type="password"/>
</div>
- <div class="input">
- <div class="label"> Verify </div>
- <div class="input"> <input id="password_verify_input" type="password"></input></div>
- <div class="note passwordnote" id="enter_a_password"><span class="bad">Enter a password</span></div>
- <div class="note passwordnote" id="passwords_different" style="display:none;"><span class="bad">Passwords different</span></div>
- <div class="note passwordnote" id="password_too_short" style="display:none;"><span class="bad">Password too short</span></div>
- <div class="note passwordnote" id="password_ok" style="display:none;"><span class="good">Password OK</span></div>
+ <div class="formRow">
+ <label for="password_verify_text"> Verify </label>
+ <input id="password_verify_input" type="password"/>
+ <span class="note passwordnote" id="enter_a_password"><span class="bad">Enter a password</span></span>
+ <span class="note passwordnote" id="passwords_different" style="display:none;"><span class="bad">Passwords different</span></span>
+ <span class="note passwordnote" id="password_too_short" style="display:none;"><span class="bad">Password too short</span></span>
+ <span class="note passwordnote" id="password_ok" style="display:none;"><span class="good">Password OK</span></span>
</div>
<div class="attention_lame" style="display:none;" id="emailinuse_message">
<span id="in_use_email">Email</span> in use, If this email is yours you can <a href="#" id="suggest_signin">sign in</a> with it?
@@ -1,21 +1,21 @@
<div class="content">
<div class="summary"><b>Forgot your password?</b> No problem! Enter your email address, pick a new password, and we'll get you set up again!</div>
- <div class="input">
- <div class="label"> Email </div>
- <div class="input"> <input id="email_input" type="text"></input></div>
- <div class="note" id="email_input_note" style="display:none;"><span class="good">Not registered</span></div>
+ <div class="formRow">
+ <label for="email_input"> Email </label>
+ <input id="email_input" type="email"/>
+ <span class="note" id="email_input_note" style="display:none;"><span class="good">Not registered</span></span>
</div>
- <div class="input">
- <div class="label"> Password </div>
- <div class="input"> <input id="password_input" type="password"></input></div>
+ <div class="formRow">
+ <label for="password_input"> Password </label>
+ <input id="password_input" type="password"/>
</div>
- <div class="input">
- <div class="label"> Verify </div>
- <div class="input"> <input id="password_verify_input" type="password"></input></div>
- <div class="note passwordnote" id="enter_a_password"><span class="bad">Enter a password</span></div>
- <div class="note passwordnote" id="passwords_different" style="display:none;"><span class="bad">Passwords different</span></div>
- <div class="note passwordnote" id="password_too_short" style="display:none;"><span class="bad">Password too short</span></div>
- <div class="note passwordnote" id="password_ok" style="display:none;"><span class="good">Password OK</span></div>
+ <div class="formRow">
+ <label for="password_verify_input"> Verify </label>
+ <input id="password_verify_input" type="password"/>
+ <span class="note passwordnote" id="enter_a_password"><span class="bad">Enter a password</span></span>
+ <span class="note passwordnote" id="passwords_different" style="display:none;"><span class="bad">Passwords different</span></span>
+ <span class="note passwordnote" id="password_too_short" style="display:none;"><span class="bad">Password too short</span></span>
+ <span class="note passwordnote" id="password_ok" style="display:none;"><span class="good">Password OK</span></span>
</div>
<div class="attention_lame" style="display:none;" id="emailinuse_message">
<span id="in_use_email">Email</span> in use, If this email is yours you can <a href="#">sign in</a> with it?
@@ -1,2 +1,2 @@
- <div class="title"><%= title %></div>
+ <h2><%= title %></h2>
<div class="content"><%= message %></div>

0 comments on commit 86ca286

Please sign in to comment.