feat(ui): wire Mosaic Button to the headless Button with focusableWhenDisabled - #9320
Open
alexcarpenter wants to merge 1 commit into
Open
feat(ui): wire Mosaic Button to the headless Button with focusableWhenDisabled#9320alexcarpenter wants to merge 1 commit into
alexcarpenter wants to merge 1 commit into
Conversation
🦋 Changeset detectedLatest commit: 175b14a The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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
1 participant
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.
Description
Note
Stacked on #9319. Review that one first; this PR's diff is against it.
Mosaic's
Buttonnow renders the headlessButtoninstead of a bare<button>, and forwards a newfocusableWhenDisabledprop:A button that disables itself mid-interaction drops focus to the body, and the user loses their place on the page. With the prop set, the button keeps its position in the tab order and is marked
aria-disabledinstead.type='button'is dropped from the call site since the headless component already defaults it.Regating the interactive states
The variant styles gated every hover/active/
[data-open]state on:enabled. That gate stops holding underfocusableWhenDisabled, which by design omits thedisabledattribute — a disabled button would have kept lighting up on hover. The button is also deliberately left hit-testable while disabled, socursor: not-allowedrenders and a wrapping tooltip still receives the pointer, which rules out suppressing the states withpointer-events.All 52 selectors are regated on
:not([data-disabled]).themePropsreflectsdata-disabledfrom the prop, so it is present whether or not the native attribute is, and one selector covers both. Compiled output is equivalent: 27 deduped atoms, no:enabledleft instyles.css.Mosaic components are internal — only
styles.cssis exported from the package — so there is no public API change and no call site opts into the prop yet. Hence the empty changeset.Checklist
pnpm testruns as expected.pnpm buildruns as expected.Type of change