#42853 closed defect (bug) (fixed)
Change password UI: Cancel button invisible on small screens
Reported by: |
|
Owned by: |
|
---|---|---|---|
Milestone: | 5.2 | Priority: | normal |
Severity: | normal | Version: | |
Component: | Users | Keywords: | has-screenshots |
Focuses: | ui, accessibility | Cc: |
Description
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)
Change History (19)
#2
@
7 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.
#5
@
6 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.
6 years ago
#8
@
6 years 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.
6 years ago
#11
@
6 years 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.
#12
@
6 years 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:
#14
@
6 years 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.
P.S.: it is also possible to click the invisible button, just clicking on the top right corner on the field: the form closes.