Components: Align disabled Button cursor with UX best practices#71321
Components: Align disabled Button cursor with UX best practices#71321Akhilanandateja wants to merge 2 commits into
Conversation
A disabled button should not appear clickable. This sets the cursor to 'default' for the disabled state. Fixes WordPress#71316
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @Akhilanandateja, @RohithMacharla11, @ktmn. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Akhilanandateja! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
|
Just to clarify for the reviewers, this PR is focused specifically on fixing the cursor for the disabled state of the Button component, which is a clear-cut UX improvement. This is separate from the larger discussion in #71316 about when enabled buttons should use a pointer. |
What?
Closes #71316
This pull request aligns the cursor style of disabled
Buttoncomponents with standard accessibility and user experience (UX) best practices by removing the interactivepointercursor.Why?
A fundamental principle of UI design is that an element's appearance should match its state. Currently, a disabled
Buttoncomponent still shows apointercursor on hover, which incorrectly signals that it can be clicked. This creates a minor but notable inconsistency in the user experience.This change corrects that behavior, ensuring the button's appearance accurately reflects its non-interactive state.
How?
The fix is a single-line CSS addition. I've added
cursor: default;to the base&:disabled, &[aria-disabled="true"]rule withinpackages/components/src/button/style.scss.This ensures that all variants of the
Buttoncomponent inherit the correct non-interactive cursor style, which browsers typically render as a "not-allowed" symbol when an element is disabled.Testing Instructions
Testing Environment Note: I encountered a persistent networking issue within my GitHub Codespace environment that prevented Storybook from rendering correctly (the server was sending the page as
text/plaininstead oftext/html). As a result, I was unable to perform the final visual verification myself.However, the change can be tested with the following steps:
Run Storybook with
npm run storybook:dev.Navigate to the Components > Button story.
Use the "Controls" panel to toggle the
isDisabledprop totrue.Hover over any disabled button variant. The cursor should now be the default system cursor (or a "not-allowed" symbol), not a pointer/hand.
The project's linting checks (
npm run lint) pass successfully.Testing Instructions for Keyboard
As disabled buttons cannot be focused via standard keyboard navigation, there are no specific keyboard testing instructions for this change.