WordPress.org

Make WordPress Core

Opened 10 days ago

Last modified 9 hours ago

#48222 new defect (bug)

"Show password" button overlaps with the LastPass icon

Reported by: SergeyBiryukov Owned by:
Milestone: Future Release 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 (13)

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

Download all attachments as: .zip

Change History (26)

#1 @SergeyBiryukov
10 days ago

  • Focuses ui added

@sabernhardt
10 days ago

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

@sabernhardt
10 days ago

login form after patch

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

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

#4 @adamsilverstein
9 days 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
9 days 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
9 days ago

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

@adamsilverstein
9 days ago

data-lpignore="true" approach

#6 @sabernhardt
9 days 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
6 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
6 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
5 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
4 days ago

simplest option: only adding min-width to password input

@sabernhardt
4 days ago

simplest option in Firefox (min-width)

@sabernhardt
4 days ago

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

@sabernhardt
4 days ago

"fake input" option in Edge, with LastPass icons

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


4 days ago

#12 @afercia
4 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
9 hours 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.

Note: See TracTickets for help on using tickets.