Make WordPress Core

Opened 23 months ago

Closed 6 months ago

Last modified 6 months ago

#42853 closed defect (bug) (fixed)

Change password UI: Cancel button invisible on small screens

Reported by: afercia Owned by: chetan200891
Milestone: 5.2 Priority: normal
Severity: normal Version:
Component: Users Keywords: has-screenshots
Focuses: ui, accessibility Cc:
PR Number:


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


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:


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 (3)

42853.patch (1.8 KB) - added by janak007 21 months ago.
UI issue has been resolved in this patch
42853.diff (7.1 KB) - added by afercia 7 months ago.
unnecessary padding.png (48.2 KB) - added by afercia 6 months ago.

Download all attachments as: .zip

Change History (19)

#1 @afercia
23 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.

21 months ago

UI issue has been resolved in this patch

#2 @janak007
21 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
21 months ago

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

#4 @janak007
21 months ago

  • Keywords has-screenshots added

@melchoyce I have added screenshots of my patch.

Desktop Screens:

Small Screens:

#5 @audrasjb
13 months ago

  • Milestone changed from 5.0 to 4.9.9

Per previous accessibility team meeting, let's move it to 4.9.9 milestone in order to see if it can land in the next minor.

This ticket was mentioned in Slack in #accessibility by rianrietveld. View the logs.

13 months ago

#7 @pento
12 months ago

  • Milestone changed from 4.9.9 to 5.1

#8 @afercia
9 months ago

  • Keywords needs-refresh added
  • Milestone changed from 5.1 to 5.2

The 5.1 release beta 1 is today. Punting to 5.2.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.

9 months ago

#10 @afercia
9 months ago

  • Owner set to chetan200891
  • Status changed from new to assigned

#11 @afercia
7 months ago

One more accessibility issue to address: when resetting the password, in the page to enter the new password the button tho hide/show the password is actually a clickable <span> element". Not focusable with the keyboard. Keyboard users can't access this feature. Needs to be changed to a <button> element.

7 months ago

#12 @afercia
7 months ago

  • Keywords needs-refresh removed

Let's make the Cancel icon visible only on mobile.

42853.diff does the following:

  • add the dashicons-no icon to the Cancel button, visible only in the mobile view
  • makes the input field a bit taller to simplify the CSS and better align the input with the buttons
  • in the mobile view, the input and the buttons have a 40 pixels height
  • this changes also the height of all the login inputs from 36 to 40 pixels
  • in the mobile view, restores the focus style of the buttons
  • cleans-up the CSS
  • moves focus back to the Generate Password button when closing the form

Screenshot before and after:


#13 @afercia
7 months ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 44895:

Accessibility: Improve the password form buttons accessibility.

  • makes the "Cancel" button always visible: this allows to generate a new password also on small screens
  • moves focus back to the Generate Password button when closing the form
  • changes the password reset show/hide button from a clickable <span> element to a real <button> element
  • improves the CSS

Props janak007, afercia.
Fixes #42853.

#14 @afercia
6 months ago

  • Keywords needs-patch added; has-patch removed
  • Resolution fixed deleted
  • Status changed from closed to reopened

Reopening: while the new right padding is necessary in the reset password screen, it sets an undesirable padding also on the other login screens. See screenshot below.

The change to the padding needs to be adjusted a bit to target only the reset password screen.

#15 @afercia
6 months ago

  • Resolution set to fixed
  • Status changed from reopened to closed

In 45157:

Login and Registration: improve the CSS padding on the login input fields.

The right padding added in [44895] needs to be set only on the input fields in the Reset Password screen and exclude other login screens.

Amends [44895].
Fixes #42853.

#16 @afercia
6 months ago

  • Keywords needs-patch removed
Note: See TracTickets for help on using tickets.