Update selector focus styling and behaviour - #38
Merged
Conversation
microbit-grace
changed the title
[data-focused] styling for Selector
microbit-grace
requested review from
microbit-matt-hillsdon
and removed request for
microbit-matt-hillsdon
August 3, 2026 15:56
microbit-grace
marked this pull request as draft
August 3, 2026 16:18
Contributor
Author
|
Going to fix #39 here as well |
so that when you mouse/keyboard focus on the selector, it changes border color without focus shadow. Also, remove borderColor hover effect.
Deploying ui with
|
| Latest commit: |
ea3813d
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://899e2138.ui-2wg.pages.dev |
| Branch Preview URL: | https://select-fix.ui-2wg.pages.dev |
microbit-grace
marked this pull request as ready for review
August 4, 2026 10:42
microbit-grace
changed the title
[data-focused] styling for Selector
Three state rules on the shared trigger slot, in the order the input recipe documents: hover, then invalid, then focus, so red beats a hover tint and the focus ring beats red. Focus keyed off `data-focused` never survived an open ComboBox list. react-aria dispatches a synthetic blur at the input when virtual focus moves to an option, so RAC clears the attribute while real focus has not moved. `menuTrigger="focus"` with a selection hits this on the first tab, which is why the icon story in #39 still had no ring; every ComboBox also lost it on arrowing into the list. Native `:focus` cannot be taken away this way. Invalid never matched anything. RAC marks the field root, and in a ComboBox the input, but never the trigger: its Button has no validity state and our ComboBox control is a plain div. The rule now comes down from the parent, with the border plus 1px ring the input recipe uses rather than the border alone. Scoped to a direct child so an app's own invalid form wrapper cannot paint every control inside it red. Hover returns. The input recipe carries it, and both NativeSelect and TextField's input render that recipe, so dropping it from the trigger left a Select the only control in a form that did not tint. The tests take these selectors from the recipe rather than restating them, so keying off an attribute RAC does not set fails there rather than in a browser. The Invalid story grows a form whose required Select and ComboBox go red on submit; its docstring records that red is the only signal a Select can give, which is #41.
react-aria keeps a ComboBox's toggle button out of the tab order, since the input owns the keyboard in the ARIA combobox pattern, and a pointer sets the focus modality to not-visible. So `data-focus-visible` on the indicator slot only ever arrived through a programmatic focus, and the 4px ring it asked for was the one treatment in the component that did not match the control beside it. The whole control shows focus instead.
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
2 participants
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.
Fixes #35, #39