From 5a7e69b6c512a1dda3caa56179116f0861e6383e Mon Sep 17 00:00:00 2001
From: Shane Tomlinson <stomlinson@mozilla.com>
Date: Fri, 17 Aug 2012 16:31:51 +0100
Subject: [PATCH] Make the example IdP more keyboard accessible.
* Add autofocus to the appropriate button or input fields.
* Enable the form to be submitted using the keyboard in "sign_in.html"
---
example/primary/index.html | 11 ++++++-----
example/primary/sign_in.html | 2 +-
2 files changed, 7 insertions(+), 6 deletions(-)
diff --git a/example/primary/index.html b/example/primary/index.html
index aa0390506..8a4a6eea6 100644
--- a/example/primary/index.html
+++ b/example/primary/index.html
@@ -14,7 +14,7 @@ BrowserID Example Primary
body { margin: auto; font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSans, sans-serif; }
.title { font-size: 2em; font-weight: bold; text-align: center; margin: 1.5em; }
.intro { font-size: 1.2em; width: 600px; margin: auto; }
-.main { text-align: center; margin-top: 2em; font-size: 1.2em; width: 500px; margin: auto; display: none; }
+.main { text-align: center; margin-top: 2em; font-size: 1.2em; width: 500px; margin: auto; }
#whoareyou { font-weight: bold; }
</style>
@@ -32,11 +32,11 @@ body { margin: auto; font: 13px/1.5 Helvetica, Arial, 'Liberation Sans', FreeSan
You are logged in as <span id="whoareyou"></span>. <a id="logout" href="#">logout</a>.
</div>
-<div class="main" id="logged_out">
+<form class="main" id="logged_out">
You are not logged in. Who would you like to be?
- <input type="text">
+ <input type="text" autofocus>
<button>doit</button>
-</div>
+</form>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
@@ -53,7 +53,8 @@ $(document).ready(function() {
}
});
}
- $("button").click(function(e) {
+ $("form").submit(function(e) {
+ e.preventDefault();
$.get('/api/login', { user: $.trim($("input").val()) })
.success(function(r) {
updateWhoIAm();
diff --git a/example/primary/sign_in.html b/example/primary/sign_in.html
index 838080d2f..56c5764bd 100644
--- a/example/primary/sign_in.html
+++ b/example/primary/sign_in.html
@@ -28,7 +28,7 @@ button { line-height: 20px; }
<div class="main" id="logged_out">
Sign in as <span id="who">...</span>
- <button>doit</button>
+ <button autofocus>doit</button>
<a href="#" id="cancel">cancel</a>
</div>
--
GitLab