Created
October 18, 2012 12:48
-
-
Save nfreear/3911598 to your computer and use it in GitHub Desktop.
A Mozilla Persona demo, with 'correct' <button> markup, for accessibility | https://login.persona.org
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html><html><title>*Mozilla Persona</title> | |
| <style> | |
| button#signin { | |
| background: url(http://developer.mozilla.org/files/3963/persona_sign_in_blue.png) no-repeat; /*185 x 25*/ | |
| width: 189px; | |
| height: 29px; | |
| } | |
| button#signin, #signin-img { | |
| cursor: pointer; | |
| border: 2px solid transparent; | |
| border-radius: 4px; | |
| } | |
| #signin:hover, #signin:focus, #signin-img:hover, #signin-img:focus { | |
| border-color: orange; | |
| background-color:orange; | |
| } | |
| #signin *{ display: none; } | |
| </style> | |
| <h1>Persona accessibility demo</h1> | |
| <p> | |
| <button id="signin" title="Sign in by email, with Persona - opens a new window"><em>Sign in</em></button> | |
| <button id="signout" title="Sign out">Sign out</button> | |
| <p> | |
| <img | |
| id="signin-img" | |
| role="button" | |
| tabindex="0" | |
| title="Sign in with your Email - opens a new window [IMG]" | |
| src="https://developer.mozilla.org/files/3955/email_sign_in_black.png" | |
| /> | |
| <script src="https://login.persona.org/include.js"></script> | |
| <script> | |
| (function () { | |
| var signinLink = document.getElementById('signin'), | |
| signoutLink = document.getElementById('signout') | |
| signinImg = document.getElementById('signin-img'); | |
| if (signinLink) { | |
| signinLink.onclick = function() { navigator.id.request(); }; | |
| }; | |
| if (signoutLink) { | |
| signoutLink.onclick = function() { navigator.id.logout(); }; | |
| }; | |
| if (signinImg) { | |
| signinImg.onclick = function() { alert("Accessibility: we don't recommend an <img>, but if you must here's how.."); }; | |
| }; | |
| })(); | |
| </script> | |
| <script> | |
| var currentUser = '[email protected]'; | |
| navigator.id.watch({ | |
| loggedInUser: currentUser, | |
| onlogin: function(assertion) { | |
| // A user has logged in! Here you need to: | |
| // 1. Send the assertion to your backend for verification and to create a session. | |
| // 2. Update your UI. | |
| //$.ajax({ }); /* <-- This example uses jQuery, but you can use whatever you'd like */ | |
| }, | |
| onlogout: function() { | |
| // A user has logged out! Here you need to: | |
| // Tear down the user's session by redirecting the user or making a call to your backend. | |
| // Also, make sure loggedInUser will get set to null on the next page load. | |
| //$.ajax({ }); | |
| } | |
| }); | |
| </script> | |
| <pre> | |
| <hr /> | |
| Step 1: Include the Persona library - Javascript | |
| Step 2: Add login and logout buttons - accessibility: use <b><button></b> markup and a useful title. | |
| ... | |
| <hr /> | |
| N.D.Freear, 2012-10-18. | |
| * https://login.persona.org | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment