feat: add password-field using slotted input

[web-padawan]

Description

This PR adds @vaadin/password-field base class, Lumo and Material theme, and visual tests.

Fixes #2190

Type of change

• Feature

[fhdhsni]

When you reveal the password and then you focus on the input to change it, it goes back to the hidden state. Also focus out hides the password again. Both seems like a bad UX IMO.

The first one is also an a11y issue since screen readers can't read the password which defeats the purpose of revealing it in the first place.

nit: I think the reveal button also doesn't convey enough info when you toggle it, it's announced "selected" when you select it and nothing we you deselect it (VoiceOver). SR users might understand it, but we can also provide additional info like here. The snippet is from this blog post

[web-padawan]

Some comments from the archived Tetralogical helpdesk channel in Slack where the prototype was discussed:

We recommend keeping the aria-label consistent, so just "Show password". This way, the label is consistently announced, followed by the pressed/not pressed state which then accurately reflects to the user what is going on

Moving the focus back to the input may be unexpected/confusing for assistive technology users. Leaving the focus where it is should then obviate the issue of announcements overlapping/clashing

[web-padawan]

@fhdhsni Created a separate issue to discuss and implement your suggestion: #2308

[web-padawan]

When you reveal the password and then you focus on the input to change it, it goes back to the hidden state.

This is now fixed as mentioned here #2275 (comment), thanks to @sissbruecker and @fhdhsni for reporting.

[sonarcloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication