[wp-trac] [WordPress Trac] #42888: Add a "Show" button next to password fields on mobile

[WordPress Trac]

#42888: Add a "Show" button next to password fields on mobile
-------------------------------------+-------------------------------------
 Reporter:  johnbillion              |       Owner:  Iceable
     Type:  enhancement              |      Status:  assigned
 Priority:  normal                   |   Milestone:  5.0
Component:  Login and Registration   |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  good-first-bug has-      |     Focuses:  accessibility,
  patch dev-feedback has-            |  javascript
  screenshots 2nd-opinion has-ux-    |
  feedback                           |
-------------------------------------+-------------------------------------

Comment (by Iceable):

 I have to apologize for the time it took me to get back to this - and
 thank you very much @adamsilverstein for your help and @boemedia for your
 feedback!

 - I was also concerned with "show/hide" being long and even longer in
 other languages (comment:16), now that you mention it too I think it is
 better to remove it altogether and have just the icon, to reclaim some of
 the field's width.
 - The text (show/hide icon) can instead be added as a `title` attribute of
 the `<button>` so it shows as a tooltip on mouse-hover.
 - I would not be inclined to change the field width: this would require to
 enlarge the whole form which everyone is used to - is this password field
 width a good enough reason to introduce such a change?
 - Reducing font size would allow to show more characters, but would it
 still be ok for accessibility, especially on mobile?
 (the two previous are actual questions, would appreciate feedback from
 designer/a11y expert)
 - Good catch about the overlap! Some padding-right added to the field
 (equal to the width of the icon + clearance) will prevent this.

 Patch [attachment:42888-5.diff] slightly improves on the previous
 iteration by taking this into consideration:
 - Icon only, also on desktop, text shows as a tooltip on mousehover.
 - This also fixes the odd height issue of the button in some browsers.
 - No overlapping with the icon if the password is longer than the field.

 [[Image(https://i.imgur.com/I7HSN2H.gif)]]

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/42888#comment:23>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform