fix(ListBox): update focus states for listbox components #15980
Conversation
✅ Deploy Preview for v11-carbon-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
There was a problem hiding this comment.
Hi @tw15egan, have you modified the focus state for dropdowns and comboboxes? 🤔
I'm not certain if it's a bug, but I'm unable to view the updated focus state in the multi-select and filterable multi-select options...
|
@Kritvi-bhatia17 Yes, they have all been updated and I am able to see the changes when looking at the latest deploy preview: |
|
Hi @tw15egan,
|
|
Heyy @tw15egan! Could you please add Michael and Lauren as reviewers once you've updated everything? |
|
@Kritvi-bhatia17 changes have been made and the deploy preview should be updated in a few minutes 👍🏻 |
|
The focus handling on dropdown and combobox looks good. This may not have been introduced here, but I was a little surprised to see the list in combobox wrapping around (i.e., when I got to the bottom item, it wrapped to the top item). This isn't a menu, so I was a little surprised to see that happen. I would call that atypical for this kind of function. Like I said, if that wasn't introduced in this change, this is probably a new issue to explore. |
|
I had a look at the pre-existing version of this component and that 'wraparound' keyboard is doing it there too, so it’s not related to the changes here. |
|
Damn, nice point @mbgower! I totally agree with you and will create a separate issue for that. |
There was a problem hiding this comment.
Awesome work, @tw15egan! You nailed those changes super quickly. ⚡️
andreancardona
added
status: ready to merge 🎉
and removed
status: ready for review 👀
status: visual review 🔍
labels
801dd7b
…gn-system#15980) * fix(ListBox): update focus states for listbox components * fix(ListBox): update fluid listbox components * test(Multiselect): update keybaord nav tests * fix(Multiselect): remove console.log * test(FluidMultiselect): update tests * fix(ComboBox): adjust mouse interactions * fix(Dropdown): adjust focus state on mouse leave * fix(MultiSelect): match mouse focus to keyboard, home/end interaction * fix(FilterableMultiselect): align keyboard, mouse focus interaction * style(ListBox): adjust outline offset when outline is only 1px * chore(console): remove console.log * chore(Multiselect): revert testing default state
Closes #15698
Updates focus states for
Listboxcomponents, as weel as setting focus to the first item inMultiSelectandFilterableMultiSelectChangelog
New
Changed
ListBoxcomponent is open is now just1pxMultiSelectandFilterableMultiSelectTesting / Reviewing
Ensure focus border on
ListBoxcomponents goes to1pxwhen the menu is open, and that the first item is focused when the menu opens with keyboard