afuna: Cat under a blanket. Text: "Cats are just little people with Fur and Fangs" (Default)
afuna ([personal profile] afuna) wrote in [site community profile] changelog2009-12-13 11:49 am
  • Add Memory
  • Share This Entry

[dw-free] standardize tabbing order on log in pages

[commit: http://hg.dwscoalition.org/dw-free/rev/d86351cb41c6]

http://bugs.dwscoalition.org/show_bug.cgi?id=784

Accessibility measure. Tab order is now in this order across all login
forms: 1. User name 2. Password 3. remember me 4. Login/submit button 5.
OpenID 6. Forgot your password

Patch by [personal profile] jadelennox.

Files modified:
  • cgi-bin/LJ/Widget/Login.pm
  • cgi-bin/bml/scheme/blueshift.look
  • cgi-bin/bml/scheme/celerity.look
  • cgi-bin/bml/scheme/gradation-vertical.look
  • cgi-bin/weblib.pl
--------------------------------------------------------------------------------
diff -r cbd9cd34e06c -r d86351cb41c6 cgi-bin/LJ/Widget/Login.pm
--- a/cgi-bin/LJ/Widget/Login.pm	Sun Dec 13 10:14:41 2009 +0000
+++ b/cgi-bin/LJ/Widget/Login.pm	Sun Dec 13 11:49:04 2009 +0000
@@ -59,23 +59,36 @@ sub render_body {
     if ($hook_rv) {
         $ret .= $hook_rv;
     } else {
+        # TabIndex
+        # tab indexes start at 11, instead of 1, in order to make
+        # the mid-page tab indexes start AFTER the login
+        # information in the site header in all of the non-lynx
+        # site schemed pages. Possibly this should be replaced
+        # with a tabindex variable which is scoped by page
+        # instead of by widget.
         $ret .= "<h2>" . LJ::Lang::ml('/login.bml.login.welcome', { 'sitename' => $LJ::SITENAMESHORT }) . "</h2>\n";
         $ret .= "<fieldset class='pkg nostyle'>\n";
         $ret .= "<label for='user' class='left'>" . LJ::Lang::ml('/login.bml.login.username') . "</label>\n";
-        $ret .= "<input type='text' value='$user' name='user' id='user' class='text' size='18' maxlength='27' style='' />\n";
+        $ret .= "<input type='text' value='$user' name='user' id='user' class='text' size='18' maxlength='27' style='' tabindex='11' />\n";
         $ret .= "</fieldset>\n";
         $ret .= "<fieldset class='pkg nostyle'>\n";
         $ret .= "<label for='lj_loginwidget_password' class='left'>" . LJ::Lang::ml('/login.bml.login.password') . "</label>\n";
-        $ret .= "<input type='password' id='lj_loginwidget_password' name='password' class='lj_login_password text' size='20' maxlength='30' /><a href='$LJ::SITEROOT/lostinfo' class='small-link'>" . LJ::Lang::ml('/login.bml.login.forget2') . "</a>\n";
+        $ret .= "<input type='password' id='lj_loginwidget_password' name='password' class='lj_login_password text' size='20' maxlength='30' tabindex='12' /><a href='$LJ::SITEROOT/lostinfo' class='small-link' tabindex='16'>" 
+                . LJ::Lang::ml('/login.bml.login.forget2') 
+                . "</a>\n";
         $ret .= "</fieldset>\n";
-        $ret .= "<p><input type='checkbox' name='remember_me' id='remember_me' value='1' tabindex='4' /> <label for='remember_me'>Remember me</label></p>";
+        $ret .= "<p><input type='checkbox' name='remember_me' id='remember_me' value='1' tabindex='13' /> <label for='remember_me'>Remember me</label></p>";
 
         # standard/secure links removed for now
         my $secure = "<p>";
         $secure .= "<img src='$LJ::IMGPREFIX/padlocked.gif' class='secure-image' width='20' height='16' alt='secure login' />";
         $secure .= LJ::Lang::ml('/login.bml.login.secure') . " | <a href='$LJ::SITEROOT/login?nojs=1'>" . LJ::Lang::ml('/login.bml.login.standard') . "</a></p>";
 
-        $ret .= "<p><input name='action:login' type='submit' value='" . LJ::Lang::ml('/login.bml.login.btn.login') . "' /> <a href='$LJ::SITEROOT/openid/' class='small-link'>" . LJ::Lang::ml('/login.bml.login.openid') . "</a></p>";
+        $ret .= "<p><input name='action:login' type='submit' value='"
+                . LJ::Lang::ml('/login.bml.login.btn.login') 
+                . "' tabindex='14' /> <a href='$LJ::SITEROOT/openid/' class='small-link' tabindex='15'>" 
+                . LJ::Lang::ml('/login.bml.login.openid') 
+                . "</a></p>";
 
         if (! $LJ::IS_SSL) {
             my $login_btn_text = LJ::ejs(LJ::Lang::ml('/login.bml.login.btn.login'));
diff -r cbd9cd34e06c -r d86351cb41c6 cgi-bin/bml/scheme/blueshift.look
--- a/cgi-bin/bml/scheme/blueshift.look	Sun Dec 13 10:14:41 2009 +0000
+++ b/cgi-bin/bml/scheme/blueshift.look	Sun Dec 13 11:49:04 2009 +0000
@@ -108,7 +108,8 @@ accountlinks<=
             size => 20,
             maxlength => 27,
             tabindex => 1,
-        }) . " <a href='$LJ::SITEROOT/openid/'>$ML{'sitescheme.accountlinks.login.openid'}</a></td></tr>";
+            raw => 'aria-required="true"',
+        }) . " <a href='$LJ::SITEROOT/openid/' tabindex=5>$ML{'sitescheme.accountlinks.login.openid'}</a></td></tr>";
         $ret .= "<tr><td><label for='login_password'>$ML{'sitescheme.accountlinks.login.password'}</label></td>";
         $ret .= "<td class='input-cell' colspan='2'>" . LJ::html_text({
             type => "password",
@@ -116,7 +117,8 @@ accountlinks<=
             id => "login_password",
             size => 20,
             tabindex => 2,
-        }) . " <a href='$LJ::SITEROOT/lostinfo'>$ML{'sitescheme.accountlinks.login.forgotpassword'}</a></td></tr>";
+            raw => 'aria-required="true"',
+        }) . " <a href='$LJ::SITEROOT/lostinfo' tabindex=6>$ML{'sitescheme.accountlinks.login.forgotpassword'}</a></td></tr>";
         $ret .= "<tr><td>&nbsp;</td>";
         $ret .= "<td class='remember-me-cell'>";
         $ret .= LJ::html_check({
diff -r cbd9cd34e06c -r d86351cb41c6 cgi-bin/bml/scheme/celerity.look
--- a/cgi-bin/bml/scheme/celerity.look	Sun Dec 13 10:14:41 2009 +0000
+++ b/cgi-bin/bml/scheme/celerity.look	Sun Dec 13 11:49:04 2009 +0000
@@ -98,7 +98,8 @@ accountlinks<=
             size => 20,
             maxlength => 27,
             tabindex => 1,
-        }) . " <a href='$LJ::SITEROOT/openid/'>$ML{'sitescheme.accountlinks.login.openid'}</a></td></tr>";
+            raw => 'aria-required="true"',
+        }) . " <a href='$LJ::SITEROOT/openid/' tabindex=5>$ML{'sitescheme.accountlinks.login.openid'}</a></td></tr>";
         $ret .= "<tr><td><label for='login_password'>$ML{'sitescheme.accountlinks.login.password'}</label></td>";
         $ret .= "<td class='input-cell' colspan='2'>" . LJ::html_text({
             type => "password",
@@ -106,7 +107,8 @@ accountlinks<=
             id => "login_password",
             size => 20,
             tabindex => 2,
-        }) . " <a href='$LJ::SITEROOT/lostinfo'>$ML{'sitescheme.accountlinks.login.forgotpassword'}</a></td></tr>";
+            raw => 'aria-required="true"',
+        }) . " <a href='$LJ::SITEROOT/lostinfo' tabindex=6>$ML{'sitescheme.accountlinks.login.forgotpassword'}</a></td></tr>";
         $ret .= "<tr><td>&nbsp;</td>";
         $ret .= "<td class='remember-me-cell'>";
         $ret .= LJ::html_check({
diff -r cbd9cd34e06c -r d86351cb41c6 cgi-bin/bml/scheme/gradation-vertical.look
--- a/cgi-bin/bml/scheme/gradation-vertical.look	Sun Dec 13 10:14:41 2009 +0000
+++ b/cgi-bin/bml/scheme/gradation-vertical.look	Sun Dec 13 11:49:04 2009 +0000
@@ -107,7 +107,8 @@ accountlinks<=
             size => 20,
             maxlength => 27,
             tabindex => 1,
-        }) . " <a href='$LJ::SITEROOT/openid/'>$ML{'sitescheme.accountlinks.login.openid'}</a></td></tr>";
+            raw => 'aria-required="true"',
+        }) . " <a href='$LJ::SITEROOT/openid/' tabindex=5>$ML{'sitescheme.accountlinks.login.openid'}</a></td></tr>";
         $ret .= "<tr><td><label for='login_password'>$ML{'sitescheme.accountlinks.login.password'}</label></td>";
         $ret .= "<td class='input-cell' colspan='2'>" . LJ::html_text({
             type => "password",
@@ -115,7 +116,8 @@ accountlinks<=
             id => "login_password",
             size => 20,
             tabindex => 2,
-        }) . " <a href='$LJ::SITEROOT/lostinfo'>$ML{'sitescheme.accountlinks.login.forgotpassword'}</a></td></tr>";
+            raw => 'aria-required="true"',
+        }) . " <a href='$LJ::SITEROOT/lostinfo' tabindex=6>$ML{'sitescheme.accountlinks.login.forgotpassword'}</a></td></tr>";
         $ret .= "<tr><td>&nbsp;</td>";
         $ret .= "<td class='remember-me-cell'>";
         $ret .= LJ::html_check({
diff -r cbd9cd34e06c -r d86351cb41c6 cgi-bin/weblib.pl
--- a/cgi-bin/weblib.pl	Sun Dec 13 10:14:41 2009 +0000
+++ b/cgi-bin/weblib.pl	Sun Dec 13 11:49:04 2009 +0000
@@ -2887,8 +2887,8 @@ LOGIN_BAR
             $ret .= "</td></tr>";
 
             $ret .= "<tr><td valign='top'>";
-            $ret .= "<a href='$LJ::SITEROOT/lostinfo'>$BML::ML{'web.controlstrip.login.forgot'}</a>";
-            $ret .= " <a href='$LJ::SITEROOT/openid/'>$BML::ML{'web.controlstrip.login.openid'}</a>";
+            $ret .= "<a href='$LJ::SITEROOT/lostinfo' tabindex='6'>$BML::ML{'web.controlstrip.login.forgot'}</a>";
+            $ret .= " <a href='$LJ::SITEROOT/openid/' tabindex='5'>$BML::ML{'web.controlstrip.login.openid'}</a>";
             $ret .= "</td><td style='font: 10px Arial, Helvetica, sans-serif;' valign='top' colspan='2' align='right'>";
             $ret .= "<input type='checkbox' id='xc_remember' name='remember_me' style='height: 10px; width: 10px;' tabindex='3' />";
             $ret .= "<label for='xc_remember'>$BML::ML{'web.controlstrip.login.remember'}</label>";
--------------------------------------------------------------------------------