Opened 2 months ago
Last modified 3 days ago
#48222 new defect (bug)
"Show password" button overlaps with the LastPass icon
Reported by: |
|
Owned by: | |
---|---|---|---|
Milestone: | 5.3.1 | Priority: | normal |
Severity: | normal | Version: | 5.3 |
Component: | Login and Registration | Keywords: | has-screenshots dev-feedback has-patch needs-testing |
Focuses: | ui | Cc: | |
PR Number: |
Description
The new "Show password" button added to login screen in [46256] overlaps with the LastPass extension icon. Tested with Google Chrome 77 on Windows 10.
This only happens on Log In and Reset Password screens. The Edit User screen is OK, as the button there is separate from the input.
Attachments (14)
Change History (34)
#2
@
2 months ago
The patch checks for a background image in the password input's style
attribute. If it finds one, the show password button moves over by 40 pixels.
#3
@
2 months ago
How do services that use the "show" button such as Facebook, Google, and WordPress.com handle this?
#4
@
2 months ago
Attaching some screenshots of the Google account login screen.
Here, the show password icon looks like it is in the right hand edge of the input - in fact, its outside the input entirely and uses a merged borderless edge to make it appear as part of the field.
#5
@
2 months ago
One other potential option would be to disable the lastpass icon for the password field by adding data-lpignore="true"
. I verified this works and that I can still fill in both fields using the icon visible in the user_name field.
#6
@
2 months ago
I tested the second patch in Edge, IE11, Opera 63, Firefox 69 and Chrome 77 on Windows 10. I had no trouble populating the two fields with LastPass when clicking the icon inside the Username/Email input or when using the show/hide button. It looks cleaner than my option, and I'm not sure having a clickable LastPass icon in the Password field is necessary after the previous field.
#7
@
2 months ago
LastPass being just one of many password managers, I would be more inclined to take the route of the other big players out there; a "fake" part of the input with no left border as noted in comment:4 would be more forward-compatible as well with whatever new services may pop up.
#8
@
2 months ago
I would also agree with the fake portion of the input. OR moving the icon up beside the 'Password' label so it's not directly in the input itself.
#9
@
2 months ago
- Keywords dev-feedback added
I agree with the "faking" of an extended input as well, instead of chasing an unknown number of vendor-specific workarounds.
#10
@
2 months ago
- Keywords has-patch needs-testing added
I included a simpler option of only the min-width
because that should not require much testing.
For the "fake input" option, I tested in various PC browsers as well as at different zoom levels and with a larger text size. That still leaves plenty of other testing (including High Contrast Mode).
This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.
2 months ago
#12
@
2 months ago
For the records, this was noted also on the Show Password ticket. See:
https://core.trac.wordpress.org/ticket/42888#comment:24
https://core.trac.wordpress.org/ticket/42888#comment:45
That said, I'm not sure WordPress should necessarily remediate to poor implementations by external software. It appears to me Lastpass should make a better job and take padding into consideration. I'd lean towards reporting upstream.
#13
@
8 weeks ago
- Milestone changed from 5.3 to Future Release
With 5.3 RC1 releasing today, this is being moved to Future Release
. If any committer feels this can be worked in quickly for 5.3 or can assume ownership in 5.4, feel free to move it back up.
#15
@
7 weeks ago
@johnbillion what are your thoughts on reporting upstream to LastPass? Seems to me LastPass should do a better job and its icon placement seems arguable. It also conflicts with native browsers UI. See for example Safari in th screenshot below. I think this also applies to Edge.
#16
@
7 weeks ago
Observation: google.com and facebook.com both place the view button outside of the input (with a fake focus border). wordpress.com uses the padding method that core is using.
moves button from the (right) edge when input has background-image in style