Opened 42 hours ago
Closed 11 hours ago
#66251 closed defect (bug) (fixed)
Remove 'cursor: not-allowed' style from buttons mixins in colors/_mixins.scss
| Reported by: | afercia | Owned by: | afercia |
|---|---|---|---|
| Priority: | normal | Milestone: | 7.2 |
| Component: | Administration | Version: | |
| Severity: | normal | Keywords: | has-patch commit |
| Cc: | Focuses: | accessibility, css |
Description
In the src/wp-admin/css/colors/_mixins.scss the mixins for the button, button-secondary, and button-tertiary contain styling for the cursor CSS property:
cursor: not-allowed;
- Why a CSS property that is related to interaction or, better, the lack of interaction is within a file that is supposed to be about colors?
- The
not-allowedcursor styling for disabled buttons is not an established pattern in WordPress. There are only 3 other occurrences in the codebase and they are minor, edge cases. - This styling doesn't add much value and isn't native behavior. All enabled buttons already get a
pointercursor while the disabled ones get the default cursor. - It introduces inconsistency with all the other buttons in the admin that don't use the mixins. As such, some disabled buttons show the
not-allowedcursor style, while others don't.
I'd like to propose to just remove this styling.
Attachments (1)
Change History (7)
#2
@
42 hours ago
- Summary Remove 'cursor: not-allowed' style for buttons mixins in colors/_mixins.scss → Remove 'cursor: not-allowed' style from buttons mixins in colors/_mixins.scss
This ticket was mentioned in PR #14040 on WordPress/wordpress-develop by @sainathpoojary.
41 hours ago
#3
- Keywords has-patch added
Removes cursor: not-allowed from the primary, secondary, and tertiary button mixins. This lets disabled buttons use the existing default cursor styles for consistency across the admin.
Trac ticket: https://core.trac.wordpress.org/ticket/66251
@afercia commented on PR #14040:
11 hours ago
#4
I pushed a commit to remove the remaining 3 occurrences of cursor: not-allowed;. They are all very edge cases and introduce unnecessary inconsistency anyways.
1
In the Custom widgets page, only the 'Custom HTML` widget used it when the button so save is disabled:
2
In the Theme / Plugin file editors. It was used on 'Update File' button when disabled:
3
In the Customizeer, when reordering menus or widgets, it was used for the 'Add Items' / 'Add Widgets' button. This didn;t work anyways becayse pointer-events: none; already resets the cursor style:
![(please configure the [header_logo] section in trac.ini)](/chrome/site/your_project_logo.png)
Example of a button with the new not-allowed cursor style