Specify tabindex on login inputs for mouse-free usage.

r2/r2/templates/captcha.html

@@ -53,7 +53,7 @@ ${rounded_captcha()}
   </%utils:round_field>
 </%def>
 
-<%def name="captchagen(iden, error='', tabulate=False, tabular = True, size=60, label=True, show_error = True)">
+<%def name="captchagen(iden, error='', tabulate=False, tabular = True, size=60, label=True, show_error = True, tabindex = None)">
 %if tabulate:
 <table>
 %endif
@@ -80,7 +80,11 @@ ${rounded_captcha()}
      %endif
           <input class="captcha cap-text" id="captcha_"
                  name="captcha" type="text" size="${size}"
-                 placeholder="type the letters from the image above" />
+                 placeholder="type the letters from the image above"
+                 %if tabindex:
+                   tabindex="${tabindex}"
+                 %endif
+                 />
      %if tabular:
      </td>
      <td>

r2/r2/templates/login.html

@@ -47,6 +47,7 @@
   <%
     op = "reg" if register else "login"
     base = g.https_endpoint if not c.cname else ''
+    tabindex = 3 if register else 2
   %>
   <form id="login_${op}" method="post" 
         action="${add_sr(base + '/post/' + op, nocname=not c.authorized_cname)}"
@@ -64,7 +65,7 @@
         <li>
           <label for="user_${op}">${_('username')}:</label>
           <input value="${user}" name="user" id="user_${op}" 
-                 type="text" maxlength="20"/>
+                 type="text" maxlength="20" tabindex="${tabindex}"/>
           %if register:
             ${error_field("BAD_USERNAME", "user", kind="span")}
             ${error_field("USERNAME_TAKEN", "user", kind="span")}
@@ -77,7 +78,7 @@
             ${_('email')}: &nbsp;<i>(${_('optional')})
           </i></label>
           <input value="" name="email" id="email_${op}" 
-                 type="text" maxlength="50"/>
+                 type="text" maxlength="50" tabindex="${tabindex}"/>
           %if register:
             ${error_field("BAD_EMAILS", "email", kind="span")}
           %endif
@@ -86,7 +87,7 @@
         <li>
           <label for="passwd_${op}">${_('password')}:</label>
           <input id="passwd_${op}" name="passwd" type="password" 
-                 maxlength="20"/>
+                 maxlength="20" tabindex="${tabindex}"/>
           %if register:
             ${error_field("BAD_PASSWORD", "passwd", kind="span")}
           %else:
@@ -97,13 +98,13 @@
         <li>
           <label for="passwd2_${op}">${_('verify password')}:</label>
           <input name="passwd2" id="passwd2_${op}" 
-                 type="password" maxlength="20" />
+                 type="password" maxlength="20" tabindex="${tabindex}"/>
           ${error_field("BAD_PASSWORD_MATCH", "passwd2", kind="span")}
         </li>
         <li>
           %if not g.disable_captcha:
           <% iden = hasattr(thing, "captcha") and thing.captcha.iden or '' %>
-          ${captchagen(iden, tabulate=True, label=False, size=30)}
+          ${captchagen(iden, tabulate=True, label=False, size=30, tabindex=tabindex)}
           %endif
           ${error_field("RATELIMIT", "ratelimit")}
           ${error_field("RATELIMIT", "vdelay")}
@@ -124,7 +125,7 @@
       %endif
     </ul>
       <p class="submit">
-        <button type="submit" class="button">
+        <button type="submit" class="button" tabindex="${tabindex}">
           ${register and _("create account") or _("login")}
         </button>
         <span class="throbber"></span>

r2/r2/templates/loginformwide.html

@@ -41,19 +41,19 @@
   %endif
   <input type="hidden" name="op" value="${op}" />
   <input name="user" placeholder="username" type="text" maxlength="20" tabindex="1"/>
-  <input name="passwd" placeholder="password" type="password" maxlength="20" tabindex="2"/>
+  <input name="passwd" placeholder="password" type="password" maxlength="20" tabindex="1"/>
 
   <div class="status"></div>
 
   <div id="remember-me">
-    <input type="checkbox" name="rem" tabindex="3" id="rem-${op}" />
+    <input type="checkbox" name="rem" id="rem-${op}" />
     <label for="rem-${op}">${_("remember me")}</label>
     <a class="recover-password" href="/password">${_("reset password")}</a>
   </div>
 
   <div class="submit">
     <span class="throbber"></span>
-    <button class="btn" type="submit" tabindex="4">${_("login")}</button>
+    <button class="btn" type="submit" tabindex="1">${_("login")}</button>
   </div>
   
   <div class="clear"></div>