-
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
Button: Stabilize __experimentalIsFocusable
prop
#62282
Conversation
I'd kind of wish |
It did come up, with the two major downsides being breaking spec of an extremely standard prop/attribute, and having to use a mixed type. I wouldn't go as far as to say it's a nonstarter, but breaking spec is a big one for me, personally. To add some context about going the "additional prop" route, I added a note in the PR description about how Ariakit adopts this pattern. |
00d5e97
to
8070a05
Compare
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 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. |
Flaky tests detected in e622a3f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/9785502033
|
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.
Nice work, thanks @mirka 👍 🚀
LGTM and tests well, together with the accompanying PR.
@@ -159,7 +161,7 @@ export function UnforwardedButton( | |||
'has-icon': !! icon, | |||
} ); | |||
|
|||
const trulyDisabled = disabled && ! isFocusable; | |||
const trulyDisabled = disabled && ! accessibleWhenDisabled; |
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.
Nice to see this getting clearer now 👏
@@ -619,6 +619,14 @@ describe( 'Button', () => { | |||
'mixed' | |||
); | |||
} ); | |||
|
|||
it( 'should not break when the legacy __experimentalIsFocusable prop is passed', () => { |
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.
👍 Thanks for adding a test!
Co-authored-by: Marin Atanasov <[email protected]>
…3107) * Replace `__experimentalIsFocusable` with `accessibleWhenDisabled` * Replace a few more remaining instances * Revert "Replace a few more remaining instances" This reverts commit 406ef77. --------- Co-authored-by: Marin Atanasov <[email protected]>
# Conflicts: # packages/editor/src/components/post-actions/actions.js
Size Change: +69 B (0%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
* Button: Stabilize `__experimentalIsFocusable` prop * Add changelog * Tweak changelog Co-authored-by: Marin Atanasov <[email protected]> * Replace `__experimentalIsFocusable` with `accessibleWhenDisabled` (WordPress#63107) * Replace `__experimentalIsFocusable` with `accessibleWhenDisabled` * Replace a few more remaining instances * Revert "Replace a few more remaining instances" This reverts commit 406ef77. --------- Co-authored-by: Marin Atanasov <[email protected]> * Fix new violation --------- Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]> Co-authored-by: stokesman <[email protected]>
What?
Stabilizes the
__experimentalIsFocusable
prop on the Button component into aaccessibleWhenDisabled
prop.TODO
no-restricted-syntax
rule (Components: Fix inaccessible disabledButton
s #62306)__experimentalIsFocusable
withaccessibleWhenDisabled
#63107)__experimentalIsFocusable
withaccessibleWhenDisabled
#63107)Why?
We are tightening our standards (#62080) around disabled Button accessibility.
The
accessibleWhenDisabled
naming and pattern aligns with what Ariakit is doing, which gives some confidence that this is sustainable and scalable across a component library.How?
__experimentalIsFocusable
prop.Testing Instructions
__experimentalIsFocusable
withaccessibleWhenDisabled
#63107 is merged into this branch.✍️ Dev Note
The
Button
component had a__experimentalIsFocusable
prop to keep the button focusable when disabled. This prop is now stabilized and renamed toaccessibleWhenDisabled
. (Existing usages of__experimentalIsFocusable
will continue to work indefinitely.)In most cases, it is recommended to set this to
true
. Disabling a control without maintaining focusability can cause accessibility issues, by hiding their presence from screen reader users, or by preventing focus from returning to a trigger element.Learn more about the focusability of disabled controls in the WAI-ARIA Authoring Practices Guide.