WordPress.org

Make WordPress Core

Opened 7 months ago

Last modified 5 months ago

#42853 new defect (bug)

Change password UI: Cancel button invisible on small screens

Reported by: afercia Owned by:
Milestone: 5.0 Priority: normal
Severity: normal Version:
Component: Users Keywords: has-patch has-screenshots
Focuses: ui, accessibility Cc:

Description

After [33206] the Cancel button is invisible on small screens:

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:

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.

Attachments (1)

42853.patch (1.8 KB) - added by janak007 5 months ago.
UI issue has been resolved in this patch

Download all attachments as: .zip

Change History (5)

#1 @afercia
7 months ago

P.S.: it is also possible to click the invisible button, just clicking on the top right corner on the field: the form closes.

@janak007
5 months ago

UI issue has been resolved in this patch

#2 @janak007
5 months ago

  • Keywords has-patch added; has-screenshots needs-patch removed

In above patch I have added dashicon (dashicons-no) for desktop also. So it will be shown in small screen also like show or hide the password.

#3 @melchoyce
5 months ago

Thanks @janak007! Can you add a screenshot with your patch applied?

#4 @janak007
5 months ago

  • Keywords has-screenshots added

@melchoyce I have added screenshots of my patch.

Desktop Screens: https://www.awesomescreenshot.com/image/3116585/3ecfdeac85cdc6a4c54a307c1b058b60

Small Screens: https://www.awesomescreenshot.com/image/3116584/c13b9e79f44539b2ecbfbbb4b9d4219b

Note: See TracTickets for help on using tickets.