Make WordPress Core

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-allowed cursor 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 pointer cursor 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-allowed cursor style, while others don't.

I'd like to propose to just remove this styling.

Attachments (1)

01 not-allowed example.png​ (31.0 KB ) - added by afercia 42 hours ago.
Example of a button with the new not-allowed cursor style

Download all attachments as: .zip

Change History (7)

@afercia
42 hours ago

Example of a button with the new not-allowed cursor style

#1 @afercia
42 hours ago

  • Owner set to afercia
  • Status new → assigned

#2 @afercia
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:

https://github.com/user-attachments/assets/0cbde121-ef88-40ce-9e3e-efe97978b78e

2
In the Theme / Plugin file editors. It was used on 'Update File' button when disabled:

https://github.com/user-attachments/assets/d356ff64-7568-4bd2-93e1-6645fc714f17

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:

https://github.com/user-attachments/assets/90976ebc-6938-47b7-ab18-beea41f77b2e

#5 @afercia
11 hours ago

  • Keywords commit added

Thank you @sainathpoojary for the PR.

I added a commit to remove the remaining occurrences. They are all unnecessary edge cases and only introduce more inconsistency. Documented in the PR comment above.

#6 @afercia
11 hours ago

  • Resolution → fixed
  • Status assigned → closed

In 64229:

Administration: Improve consistency of the disabled buttons styling.

A few buttons had the cursor: not-allowed; style applied, which has now been removed. This styling is unnecessary and only introduces inconsistency with other disabled buttons styling.

For the removed styles in colors/_mixins.scss it is also worth noting that a style related to interaction should not live in a file that contains mixins dedicated to colors.

  • Removes the cursor: not-allowed style from buttons mixins in colors/_mixins.scss.
  • Removes the remaining 3 occurrences for the classic 'Custom HTML' widget, the Theme / Plugin file editors and in the Customizer when reordering menus or widgets.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/14040

Props sainathpoojary, dhruvang21, afercia.
Fixes #66251.

Note: See TracTickets for help on using tickets.