[select] fix(a11y): update active item on focus changes #5252
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.
Pass handleFocus to itemRenderer to make select & query list components more accessible
Checklist
Changes proposed in this pull request:
Pass
handleFocus
to itemRenderer to makeSelect
&QueryList
components more accessible. Previously, tabbing through a query list would not update theactiveItem
, this caused unexpected behavior when selecting the actively focused item as it would actually select whatever was inactiveItem
.These changes don't completely solve the problem as the up/down key driven state can still get out of sync with the focused item, but tabbing again will resume and we'll never select an unexpected item. I think the fully-baked solution here would go both ways focus <-> active, but this would be much greater lift.
Reviewers should focus on:
The focus here should be whether or not we consider this a viable intermediary state, and if it makes sense to update the active item "on focus" in this way. Another note is that this isn't relevant for
Suggest
/Multiselect
components as the input is outside of the popover in those - tabbing in general is just completely broken there.Screenshot
Before:
After: