Use correct input types for email and tel (ux improvement for mobile)

[coliff]

No description provided.

[Hinton]

Hi @coliff,

Apologies for the late response. Unfortunately setting type="email" or "tel" will toggle validation to ensure the input adheres to the requirements. While this is not necessarily a bad thing, but we would need to apply it to all platforms, not only web.

We are going to be working on adding additional item types according to the roadmap https://community.bitwarden.com/t/bitwarden-roadmap/12865 which seems like a good opportunity to go over these potential breaking changes internally and make a decision.

I'm going to close this PR for now and hopefully it will be included with the additional item types which will start dev work first half 2022.

[coliff]

heya @Hinton - thanks for the reply!

I think we could use inputmode="email" and inputmode="tel" instead then. I wrote about that for CSS Tricks:
https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/#aa-tel
https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/#aa-email

That wouldn't use validation, but it would be helpful for tablet/mobile users with virtual keyboards.

[Hinton]

@coliff That's interesting, I wasn't aware of inputmode. I'll circle this internally with our design theme but in the meanwhile feel free to re-open a PR if you want (since I apparently can't re-open this due to the branch being deleted).