CollapsibleCard: move trigger to the whole header#76265
Merged
Conversation
9 tasks
|
Size Change: 0 B Total Size: 8.75 MB ℹ️ View Unchanged
|
4d4f343 to
75c28a2
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 17917f5. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22819968718
|
mirka
reviewed
Mar 10, 2026
Member
There was a problem hiding this comment.
I think this is an improvement over the previous, and although it's still quite hacky, not necessarily unpalatable if we have unit tests.
But just wanted to check if we considered a structure where there's only one trigger, and the button is "decorative" (i.e. a place for the focus ring to rest when in reality the focus is on the actual Trigger).
Contributor
Author
|
@mirka what about the tooltip? Can we completely remove it, and tweak the |
4 tasks
Member
I'm looking at the examples in Base UI and Ariakit, and it seems like we can make things even more simpler. We can remove the tooltip because the trigger name is actually just the |
beb4f59 to
df8781a
Compare
Contributor
Author
|
@mirka I completely changed the approach, taking inspiration from your previous comment(s). There is now only one I really like this solution, it provides better UX with a simpler code. |
ciampo
commented
Mar 13, 2026
2fd3041 to
d6b4cd6
Compare
mirka
approved these changes
Mar 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
Follow-up to #76252
Replace the manual click-delegation logic in
CollapsibleCard.Headerby making theCollapsibleCard.Headerthe trigger itself, and by replacing the previous trigger button with a non-interactive icon.Why?
The previous implementation was hacky. The new implementation is cleaner and achieves very similar visual styles with a lot less code — and is more accessible, since the new trigger (ie. the new header) has, by default, an accessible name specific for each card.
How?
Card.Headeras aCollapsible.TriggerIcon, but still show the focus ring only around the icon when the header is:focus-visibleTesting Instructions
npm run test:unit -- packages/ui/src/collapsible-card/test/index.test.tsx