46

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.

12

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.

  • Thanks for fixing this! I was thrilled to find I could go back to using my password manager today without re-configuring it for every SE site. Also thanks for the research and idea on how to have your cake and eat it too. – Caleb Mar 25 at 6:11
6

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.

-13

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.

  • 8
    Then simply adding tabindex values should fix this problem, right? – quazgar Mar 18 at 9:15
  • @quazgar should is the key... and since things are always more complicated than how they look like, doing that has big chance to cause other, much bigger, bugs. (e.g. people won't be able to login at all) Bottom line: even such a "small" change will require long hours, maybe days, of developer time, to properly test the changes and try to fix the bugs they cause before it's launched. – Shadow The Curly Braced Wizard Mar 18 at 9:18
  • 3
    I don't think there is a need to provide a rationale for this regression (mess) retroactively. – moooeeeep Mar 19 at 22:01

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .