Pressing "tab" in log-in form switches to "Forgot password?"

Question

The login form used to have an intuitive behaviour up to a few days ago: pressing the tab key would switch from the email field to the password field, just like pretty much any such login form under the sun. For some reason it was changed recently and pressing the tab key from the email field switches to "Forgot password?" which isn't the expected behaviour in a login form. Could this change be rolled back to an intuitive behaviour?

Also could we have the email field automatically selected when the login page is opened? It's also what I would consider the most intuitive behaviour when a page is dedicated to login.

EDIT: as mentioned in comments and in another question, it also breaks password managers that rely on the fact that typing the login, tab, then the password should just work.

Answer 1

A fix for this has merged into master and will be built soon, likely sometime tomorrow.

I first looked into solving this by implementing tabindex on each of the inputs, but the latest thinking behind implementing tabindex is... "don't". Both MDN and Google use verbiage that describes it as an anti-pattern, since it locks keyboards into tabbing between only those elements that include it. And like z-index, you can end up in an arms race between elements.

Instead, we should rely on the order of the DOM. Unfortunately, we really love the visual layout of putting the forgot password link where it is, especially since it's close to the task at hand. We've actually flipped the source order of that password block, and then flipped the display back using flex box's column reverse.

It's an interesting approach, but solves not needing to rely on tabindex, and it also keeps us from throwing a tabindex="-1" on that link, disabling tabbing to it—something we really don't want to do.

We can consider moving the forgot password link entirely in the future, but this fixes the workflow for now and maintains that nice layout.

Answer 2

This is an important bug that should get fixed. My login manager broke because the standard <USERNAME><TAB><PASSWORD><ENTER> sequence no longer works. Either the link should be moved after the password input field or the HTML tab order property should be set.

Of course every user could just retrain their fingers and I could add an exception to my password manager, but this is something developers can fix to make everybody else's lives that less surprising.

Answer 3

Now the tab order is broken!

The displayed order is

1. 'Email' input
2. 'Forgot password?' link
3. 'Password' input
4. 'Log in' button

The current tab order is

1. 'Email' input
2. 'Password' input
3. 'Forgot password?' link
4. 'Log in' button

A typical expected tab order by keyboard users is

1. 'Email' input
2. 'Password' input
3. 'Log in' button

Answer 4

This isn't really a bug, it's part of a design change.

This is how the login form used to look like: (wayback machine screenshot)

As you can see, the "forgot password" link is below the password field, and very small. I'm pretty sure many people complained they can't find it, so SE decided to change the design and put it in a much more visible place, with clear text:

Since none of the elements have a tabindex, the browser decided it itself, based on the actual location of the elements, hence the bad order we see in use.