Posted by nickl on July 28, 2008 at 4:54pm
Jump to:
| Project: | Remember me |
| Version: | 6.x-2.x-dev |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | closed (fixed) |
Issue Summary
Pressing tab from the password field does not set focus to the remember me checkbox, instead focus jumps to the submit button.
Comments
#1
Added tabindex attributes to form elements in form alter when adding the checkbox.
<?php$form['name']['#attributes']['tabindex'] = '1';
$form['pass']['#attributes']['tabindex'] = '2';
$form['remember_me']['#attributes']['tabindex'] = '3';
$form['submit']['#attributes']['tabindex'] = '4';
?>
#2
Automatically closed -- issue fixed for two weeks with no activity.
#3
Sorry, but this does not solve the problem.
You need to consider that an average page can have a lot more form elements, all with no explicit tabindex (and other interactive elements such as links etc). Thus, the browser will jump to all the other form elements, before it finally gets to the password field.
I think the only safe solution is to change the order of the fields in html.
#4
See also
http://drupal.org/node/665982#comment-3560662
("hint" module).
There could be other tabindex side effects in combination with "hint", but this one is definitely an issue for remember_me.
#5
Please provide detailed scenario to reproduce this problem.
Is this still an issue?
The fields are properly ordered in html with he correct tabindex and works in every scenario I have tried.
<div><div class="form-item" id="edit-name-wrapper"><label for="edit-name">Username: <span class="form-required" title="This field is required.">*</span></label>
<input type="text" maxlength="60" name="name" id="edit-name" size="15" value="" tabindex="1" class="form-text required" />
</div>
<div class="form-item" id="edit-pass-wrapper">
<label for="edit-pass">Password: <span class="form-required" title="This field is required.">*</span></label>
<input type="password" name="pass" id="edit-pass" maxlength="60" size="15" tabindex="2" class="form-text required" />
</div>
<div class="form-item" id="edit-remember-me-wrapper">
<label class="option" for="edit-remember-me"><input type="checkbox" name="remember_me" id="edit-remember-me" value="1" checked="checked" tabindex="3" class="form-checkbox" /> Remember me</label>
</div>
<input type="submit" name="op" id="edit-submit" value="Log in" tabindex="4" class="form-submit" />
Please provide more info.
#6
Sorry, this is quite long ago now :(
I suppose, by looking at the code, if anything else on the page has a tabindex of 2 or 3 (or in some cases, 1 or 4), then this other element will sneak into the sequence.
E.g. if another element further down in the html has tabindex 2, this would result in this tab sequence:
username
password
other field with tabindex 2
remember me checkbox
submit
To avoid that, you could try giving all those items the same tab index. Such as, tabindex="1" for each of them. They would still be tabbed in the sequence that they are supposed to, because that's the order in html. No other element will get in between.
#7
It could then also be possible somehow that another element with index 1 catches the tab order.
Changed the tabindex to be 99991 through 99994 to prevent any other field to likely have the same index.
#8
If another element has index 1, it will be tabbed either before or after the other inputs, because it is either before or after these in the DOM. To be in between, it would have to be in between in the DOM.
Or do I miss something?
<input type="text" value="Before" tabindex="1" /><div><div class="form-item" id="edit-name-wrapper">
<label for="edit-name">Username: <span class="form-required" title="This field is required.">*</span></label>
<input type="text" maxlength="60" name="name" id="edit-name" size="15" value="" tabindex="1" class="form-text required" />
</div>
<div class="form-item" id="edit-pass-wrapper">
<label for="edit-pass">Password: <span class="form-required" title="This field is required.">*</span></label>
<input type="password" name="pass" id="edit-pass" maxlength="60" size="15" tabindex="1" class="form-text required" />
</div>
<div class="form-item" id="edit-remember-me-wrapper">
<label class="option" for="edit-remember-me"><input type="checkbox" name="remember_me" id="edit-remember-me" value="1" checked="checked" tabindex="1" class="form-checkbox" /> Remember me</label>
</div>
<input type="submit" name="op" id="edit-submit" value="Log in" tabindex="1" class="form-submit" />
<input type="text" value="After" tabindex="1" />
(I set this to needs work, because I am not sure it is being read otherwise)
#9
set back to fixed as the solution at hand still solves the problem.
Feel free to roll a patch to the contrary with your test results at hand.
#10
Automatically closed -- issue fixed for 2 weeks with no activity.