[wp-trac] [WordPress Trac] #48222: "Show password" button overlaps with the LastPass icon

WordPress Trac noreply at wordpress.org
Fri Mar 25 01:09:51 UTC 2022

#48222: "Show password" button overlaps with the LastPass icon
 Reporter:  SergeyBiryukov                       |       Owner:
                                                 |  sabernhardt
     Type:  defect (bug)                         |      Status:  accepted
 Priority:  normal                               |   Milestone:  6.0
Component:  Login and Registration               |     Version:  5.3
 Severity:  normal                               |  Resolution:
 Keywords:  has-screenshots has-patch needs-     |     Focuses:  ui
  design-feedback needs-testing early            |

Comment (by sabernhardt):

 That screenshot looks the same (to me) as 48222.10.diff, but this patch
 does need more than design feedback.
 - Setting `display: block` on `.login .button.wp-hide-pw` overrides `.no-
 js .hide-if-no-js`.
 - The JS change affects the user pages (Profile, New User, Edit User). The
 text includes "password" on larger screens, and the ARIA label is stuck at
 "Hide password" whether the password is showing or not.

 Regarding the design:
 - Preventing overlap of password manager icons over the password itself
 seems impossible without including extra padding. That would not make
 sense for people who do not use a password manager.
 - I do not want to try forcing a width for the toggle button (for example,
 using both text strings in `span` tags and hiding one with `visibility:
 hidden`). However, **moving the icon** to the other side of the text could
 make the width difference between the two text strings less noticeable.
 - The bottom margin could be slightly more (16px instead of 12).

 I [https://github.com/sabernhardt/wordpress-develop/pull/2 drafted a PR]
 to explore some revisions. (Note: The PR is still on my fork and may

Ticket URL: <https://core.trac.wordpress.org/ticket/48222#comment:61>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform

More information about the wp-trac mailing list