[UX] Tab index: Password toggle should come after password field

[klonos]

This is a follow-up to #3048

Before that change, you could do this:

1. Focus the username field (won't be needed after [UX] Automatically focus username field on login page #4183 😉 )
2. Type your username.
3. Press tab -> the password field gets focus
4. Type your password
5. Press enter -> log in

After #3048 was merged, you need to tab twice after step 2:

1. Focus the username field
2. Type your username.
3. Press tab -> the "show password" link gets focus
4. Press tab again -> the password field gets focus
5. Type your password
6. Press enter -> log in

[klonos]

...I'm thinking that this may need to be a wider change 🤔 ...do we in general (not specifically to the login form) want the tab index for the show/hide toggle to have priority over the actual password text field, or should we have it so that the toggle always comes after the password field?

[klonos]

Simple one-line PR up for review: backdrop/backdrop#3220

Before, the .password-toggle link is rendered before the password input:

<div class="form-item form-type-password form-item-pass">
  <label for="edit-pass">Password
    <abbr class="form-required" title="This field is required.">*</abbr>
  </label>
  <span class="password-toggle-wrapper password-hidden">
    <a href="#" class="password-toggle">Show password</a>
    <input data-password-toggle="..." type="password" id="edit-pass" name="pass" size="60" maxlength="128" class="form-text required password-toggle-processed" autocomplete="off" style="...">
  </span>
</div>

After, the .password-toggle link is rendered after the password input (visually, CSS-wise nothing changes - the toggle is still shown at the top-right of the password field):

<div class="form-item form-type-password form-item-pass">
  <label for="edit-pass">Password
    <abbr class="form-required" title="This field is required.">*</abbr>
  </label>
  <span class="password-toggle-wrapper password-hidden">
    <input data-password-toggle="..." type="password" id="edit-pass" name="pass" size="60" maxlength="128" class="form-text required password-toggle-processed" autocomplete="off" style="...">
    <a href="#" class="password-toggle">Show password</a>
  </span>
</div>

[ghost]

should we have it so that the toggle always comes after the password field?

Yes, I believe so.

The PR works nicely and is beautifully simple :-) RTBC from me.

[ghost]

I added the milestone candidate - bug label as this fixes a slight UX regression introduced by the other linked issue.

[quicksketch]

This sounds great! I frequently accidentally focus "Show password" when tabbing between the username and password field.

[quicksketch]

I merged backdrop/backdrop#3220 into 1.x and 1.16.x. Thanks @klonos and @BWPanda!