Login page presentation change

This discussion arose when searching a solution for this Jira issue.
https://github.com/xwiki/xwiki-platform/pull/2110

There is a need to remove the hard-coded tab-index from the form.
When removing them, the DOM order is used instead for tab indexing.
However, the login form needs this tab order:

Username —Tab–> Password —Tab–> Remember me —Tab–> Log-in

This cannot work with the former presentation of the login form (and without heavy css hacks).

The initial state:
18859-DefaultOrder
The state without tab-index:
18859-lostOrder
The state we want, without tab-index or css hack:
18859-Changed0

There are a few solutions on how to display the two links, while keeping them after the submit button in the DOM and tab orders:

  1. Like Sign in to GitHub · GitHub : sacrifice some accessibility and use a heavy css hack to make the visual order different from the DOM order (but keep it as it was in the initial state)
    18859-Github
  2. Recovery links one under the other, right side
    18859-Change2
  3. Recovery links one under the other, left side
    18859-Change3
  4. Recovery links on both sides
    18859-Change4
  5. Light css hack to get both the recovery links above the submit button.
    18859-Change5
  6. Combine the two links in one prompt displayed under login
    18859-Change6

Notes:

  • Those are quickly put together images, they don’t correspond to the expected result exactly but give an idea of the changes.
  • Those are only a few possibilities, any other proposition is welcome

I think the most promising solutions are 6. and after it 4. .
1. should be avoided if possible, and 5. might become a bit cramped on smaller devices.

For 6., the exact content of the text and position of the links are not trivial and should be discussed if this is the solution we select.

What do you think is the solution we should select?

To be honest I like proposal 6 but I’m afraid it could be problematic for some other languages, so I’d be -0 for it without knowing how it would be handled in japanese for example.

Then I don’t have a strong opinion between 2, 3 and 4: they’re all good to me so +1 for any of those.