WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 3 days ago

#48222 new defect (bug)

"Show password" button overlaps with the LastPass icon

Reported by: SergeyBiryukov 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)

48222.login-screen.PNG (7.4 KB) - added by SergeyBiryukov 2 months ago.
48222.reset-password-screen.PNG (13.1 KB) - added by SergeyBiryukov 2 months ago.
48222.edit-user-screen-ok.PNG (7.6 KB) - added by SergeyBiryukov 2 months ago.
48222.diff (373 bytes) - added by sabernhardt 2 months ago.
moves button from the (right) edge when input has background-image in style
patch-login-show-password-button-lastpass.png (4.9 KB) - added by sabernhardt 2 months ago.
login form after patch
Sign in - Google Accounts 2019-10-06 07-08-00.jpg (61.8 KB) - added by adamsilverstein 2 months ago.
google sign in
Image 2019-10-06 at 7.09.53 AM.png (26.8 KB) - added by adamsilverstein 2 months ago.
Log In ‹ Develop WordPress Title — WordPress 2019-10-06 07-19-24.jpg (32.5 KB) - added by adamsilverstein 2 months ago.
login with data-lpignore="true" in password field
48222.2.diff (1.6 KB) - added by adamsilverstein 2 months ago.
data-lpignore="true" approach
48222.3.diff (368 bytes) - added by sabernhardt 2 months ago.
simplest option: only adding min-width to password input
login-simple-min-width-firefox.png (8.0 KB) - added by sabernhardt 2 months ago.
simplest option in Firefox (min-width)
48222.4.diff (1.1 KB) - added by sabernhardt 2 months ago.
"fake input" option with border on container and larger input areas for login
fake-input-lastpass-edge.png (10.5 KB) - added by sabernhardt 2 months ago.
"fake input" option in Edge, with LastPass icons
48222 Safari LastPass.png (47.7 KB) - added by afercia 7 weeks ago.
See the Safari "key" icon on the username field.

Download all attachments as: .zip

Change History (34)

#1 @SergeyBiryukov
2 months ago

  • Focuses ui added

@sabernhardt
2 months ago

moves button from the (right) edge when input has background-image in style

@sabernhardt
2 months ago

login form after patch

#2 @sabernhardt
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 @johnbillion
2 months ago

How do services that use the "show" button such as Facebook, Google, and WordPress.com handle this?

#4 @adamsilverstein
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 @adamsilverstein
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.

@adamsilverstein
2 months ago

login with data-lpignore="true" in password field

@adamsilverstein
2 months ago

data-lpignore="true" approach

#6 @sabernhardt
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 @Clorith
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 @garrett-eclipse
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 @davidbaumwald
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.

@sabernhardt
2 months ago

simplest option: only adding min-width to password input

@sabernhardt
2 months ago

simplest option in Firefox (min-width)

@sabernhardt
2 months ago

"fake input" option with border on container and larger input areas for login

@sabernhardt
2 months ago

"fake input" option in Edge, with LastPass icons

#10 @sabernhardt
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 @afercia
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 @davidbaumwald
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.

#14 @johnbillion
7 weeks ago

  • Milestone changed from Future Release to 5.3.1

#15 @afercia
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.

@afercia
7 weeks ago

See the Safari "key" icon on the username field.

#16 @johnbillion
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.

This ticket was mentioned in Slack in #forums by sterndata. View the logs.


3 weeks ago

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


2 weeks ago

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


3 days ago

Note: See TracTickets for help on using tickets.