-
Notifications
You must be signed in to change notification settings - Fork 4.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Font Library: Use Button's API to disable footer buttons #58529
Conversation
Size Change: -5 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 🚀
As you pointed out, the Button
component already disables internally click events when disabled but focusable:
gutenberg/packages/components/src/button/index.tsx
Lines 178 to 192 in c87e338
if ( disabled && isFocusable ) { | |
// In this case, the button will be disabled, but still focusable and | |
// perceivable by screen reader users. | |
buttonProps[ 'aria-disabled' ] = true; | |
anchorProps[ 'aria-disabled' ] = true; | |
for ( const disabledEvent of disabledEventsOnDisabledButton ) { | |
additionalProps[ disabledEvent ] = ( event: MouseEvent ) => { | |
if ( event ) { | |
event.stopPropagation(); | |
event.preventDefault(); | |
} | |
}; | |
} | |
} |
Thank you for telling me that 😊 |
Follow up: #58364
See this comment: #58364 (comment)
What?
This PR uses the
__experimentalIsFocusable
anddisabled
props to disable the footer buttons of the font library.Why?
It makes more sense to use the component's API rather than using custom props.
How?
I also removed the conditional statement in the
onClick
prop. Even in the whole project, when using__experimentalIsFocusable
anddisabled
, such conditional statements seem to be used very little.I would appreciate any advice on whether this change makes sense.
Testing Instructions
Please refer to the "Testing Instructions for Keyboard" section of #58364 to confirm that it still works as expected.