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

Sun Jan 28 15:31:40 UTC 2018

#42888: Add a "Show" button next to password fields on mobile
-------------------------------------+-------------------------------------
 Reporter:  johnbillion              |       Owner:
     Type:  enhancement              |      Status:  new
 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 ux-feedback            |
-------------------------------------+-------------------------------------

Comment (by Iceable):

 I restarted from scratch for [attachment:42888-4.diff] with a more global
 approach to work on all password fields, and included more accessibility
 considerations thanks to @afercia 's comments:

 * Used an actual `<button>` instead of a `<span>` in `wp-login.php` (login
 form and password reset form)

 * Added text (Show / Hide) next to the icon on login et password reset
 forms.

 Note: this makes the button larger and the field smaller. It will be even
 larger for languages in which the words for "Show" and "Hide" are longer.
 Not sure whether this will be an issue or not, but if it is then maybe we
 can move the button below the field as opposed to on the right.

 * Changed the `<p>` tags around inputs with `<div>`.

 I could have removed some of them completely (which actually makes no
 visual difference), but I thought some wrappers wouldn't hurt and may be
 useful in some cases.

 * Used non wrapping `<label>`'s' with `for` attributes for input fields.

 * While I was at it, I also got rid of `<p>` tags and adjusted
 `<label>`'s' in other forms in `wp-login.php` (lost password, register)

 * Enqueued `user-profile.js` on the login form page, and modified the
 password fields related functions so that:
   * They also work for the login page so we don't need to write additional
 functions
   * They use the "new approach" (toggling the field's `type` between
 `text` and `password` instead of using mirrored fields) for all password
 fields: login, password reset, add new user, edit user

 Note: `jQuery` was not loaded on the login page before. It is now since it
 is a dependency of `user-profile.js`. I don't see it as an issue, but
 worth noting.

 * Login and Password reset pages: added the `.no-js` class to `<body>`, so
 we can use `.hide-if-no-js` to hide the toggle button when JS is not
 available.

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