[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:
     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            |
-------------------------------------+-------------------------------------
Changes (by afercia):

 * focuses:  javascript => accessibility, javascript


Comment:

 Noticed a few things:
 - The current patch wraps both the input field and the button in a
 `<label>` element; this should be avoided as the label "Password" should
 be associated just to the input field.
 - On the other hand, some of the labels in `wp-login.php` wrap the
 associated control and also use a `for` attribute; this should be avoided:
 either use a wrapping label without for attribute or a not wrapping label
 with a for attribute. Never do both. As per the
 [https://make.wordpress.org/core/handbook/best-practices/coding-standards
 /accessibility-coding-standards/#labeling WordPress accessibility
 standards], a not wrapping label with a for attribute is preferred.
 Wondering if this would be a good opportunity to adjust all these labels.
 - `The login screen uses <p> tags to as wrapper to the input elements`.
 Yeah, that's not a great example of good semantics. Paragraphs should be
 used to markup units of text separable from the rest of the content, not
 to wrap form elements. I guess the paragraphs were used form some styling
 purposes but I don't see a good reason to keep them.
 - Worth noting a similar button is already used in the Reset Password page
 and in the Installation pages (see screenshots below); these pages already
 use jQuery because it's loaded as dependency of the `user-profile` script
 (which also makes some useful strings available in `userProfileL10n`); I
 don't see why jQuery shouldn't be used in the login page too, unless I'm
 missing something

 As per the button content, from an accessibility perspective, some visible
 text would be preferable, as done in the Installation pages:

 [[Image(https://cldup.com/Ec8TjBPTkA.png)]]

 [[Image(https://cldup.com/qrtxmkwQsO.png)]]

 Note: in the Reset Password page, the button is actually a `<span>`
 element and should be changed to a button.

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