Make WordPress Core

Opened 3 years ago

Closed 19 months ago

Last modified 19 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:


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 3 years ago.
UI issue has been resolved in this patch
42853.diff (7.1 KB) - added by afercia 20 months ago.
unnecessary padding.png (48.2 KB) - added by afercia 19 months ago.

Download all attachments as: .zip

Change History (19)

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

3 years ago

UI issue has been resolved in this patch

#2 @janak007
3 years 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
3 years ago

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

#4 @janak007
3 years ago

  • Keywords has-screenshots added

@melchoyce I have added screenshots of my patch.

Desktop Screens:

Small Screens:

#5 @audrasjb
2 years 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.

2 years ago

#7 @pento
2 years ago

  • Milestone changed from 4.9.9 to 5.1

#8 @afercia
22 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.

22 months ago

#10 @afercia
22 months ago

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

#11 @afercia
20 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.

20 months ago

#12 @afercia
20 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
20 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
19 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
19 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
19 months ago

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