WordPress.org

Make WordPress Core

Opened 2 weeks ago

Last modified 4 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: trunk
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 weeks ago.
48222.reset-password-screen.PNG (13.1 KB) - added by SergeyBiryukov 2 weeks ago.
48222.edit-user-screen-ok.PNG (7.6 KB) - added by SergeyBiryukov 2 weeks ago.
48222.diff (373 bytes) - added by sabernhardt 2 weeks 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 weeks ago.
login form after patch
Sign in - Google Accounts 2019-10-06 07-08-00.jpg (61.8 KB) - added by adamsilverstein 2 weeks ago.
google sign in
Image 2019-10-06 at 7.09.53 AM.png (26.8 KB) - added by adamsilverstein 2 weeks ago.
Log In ‹ Develop WordPress Title — WordPress 2019-10-06 07-19-24.jpg (32.5 KB) - added by adamsilverstein 2 weeks ago.
login with data-lpignore="true" in password field
48222.2.diff (1.6 KB) - added by adamsilverstein 2 weeks ago.
data-lpignore="true" approach
48222.3.diff (368 bytes) - added by sabernhardt 10 days ago.
simplest option: only adding min-width to password input
login-simple-min-width-firefox.png (8.0 KB) - added by sabernhardt 10 days ago.
simplest option in Firefox (min-width)
48222.4.diff (1.1 KB) - added by sabernhardt 10 days 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 10 days ago.
"fake input" option in Edge, with LastPass icons
48222 Safari LastPass.png (47.7 KB) - added by afercia 5 days ago.
See the Safari "key" icon on the username field.

Download all attachments as: .zip

Change History (30)

#1 @SergeyBiryukov
2 weeks ago

  • Focuses ui added

@sabernhardt
2 weeks ago

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

@sabernhardt
2 weeks ago

login form after patch

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

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

#4 @adamsilverstein
2 weeks 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 weeks 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 weeks ago

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

@adamsilverstein
2 weeks ago

data-lpignore="true" approach

#6 @sabernhardt
2 weeks 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
12 days 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
12 days 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
11 days 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
10 days ago

simplest option: only adding min-width to password input

@sabernhardt
10 days ago

simplest option in Firefox (min-width)

@sabernhardt
10 days ago

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

@sabernhardt
10 days ago

"fake input" option in Edge, with LastPass icons

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


10 days ago

#12 @afercia
10 days 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
6 days 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
5 days ago

  • Milestone changed from Future Release to 5.3.1

#15 @afercia
5 days 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
5 days ago

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

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

Note: See TracTickets for help on using tickets.