[wp-trac] [WordPress Trac] #42853: Change password UI: Cancel button invisible on small screens

[WordPress Trac]

#42853: Change password UI: Cancel button invisible on small screens
-------------------------------+-----------------------------------------
 Reporter:  afercia            |      Owner:
     Type:  defect (bug)       |     Status:  new
 Priority:  normal             |  Milestone:  5.0
Component:  Users              |    Version:
 Severity:  normal             |   Keywords:  has-screenshots needs-patch
  Focuses:  ui, accessibility  |
-------------------------------+-----------------------------------------
 After [33206] the Cancel button is invisible on small screens:

 [[Image(https://cldup.com/fsZgBY-m9z.png)]]

 While on the login screen there shouldn't be a Cancel button, on the other
 admin screens (edit user, add new user, profile) the Cancel button is
 actually still there: only its text content is hidden and the button is
 still focusable and can be activated:

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

 This is an accessibility and usability issue, since an operable control is
 not visible in the UI. Worth noting the button `aria-label` is always
 "Cancel password change" also in the new user screen, where actually
 nothing is being changed: it's a new user creation process where the
 password gets "created" and not "changed".

 There's also a functional issue: the Cancel button doesn't just "cancel"
 the current operation. It also generates a new password when clicked, so
 when reopening the form a new password is ready. Or, at least, it should:
 see #42852.

 Therefore, on small screens there's no way to generate a new password
 after clicking "Generate password" or "Show password".

 As I see it, there are a couple options:
 - if it's OK to remove the ability to generate a new password on small
 screens, then the whole button should be hidden, not just its text. At
 this point the `aria-label` would be pointless and should be removed.
 - otherwise, to keep the ability to generate a new password on small
 screens, the whole responsive UI should be reviewed in order to always
 display both the show/hide and the cancel buttons.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/42853>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform