feat: update focus states for Dropdown, Combobox & Multiselect #18230
Conversation
✅ Deploy Preview for v11-carbon-web-components ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for carbon-elements ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
✅ Deploy Preview for v11-carbon-react ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #18230 +/- ##
==========================================
- Coverage 84.17% 84.15% -0.02%
==========================================
Files 408 408
Lines 14435 14443 +8
Branches 4640 4641 +1
==========================================
+ Hits 12150 12155 +5
- Misses 2121 2124 +3
Partials 164 164 ☔ View full report in Codecov by Sentry. |
… into chore/focus-states
There was a problem hiding this comment.
Hi @annawen1,
Thank you for working on this! I have a few small points I wanted to share and discuss. Please let me know if you'd prefer to connect over a call to go over these in more detail:
Fluid Dropdown
There seems to be a bug where the focus stroke doesn’t reappear after using the down arrow key.
Combo box & Multiselect
- Just wanted to crosscheck if the focus stroke is 2px in situations like these:
- Is the focus state supposed to move dynamically with the cursor, similar to the dropdown?
- For both fluid and default filterable multi-select and filterable with layer multi-select, the down arrow key doesn’t appear to function as expected.
- In fluid filterable and filterable with layer multi-select, the tab and enter key interactions don’t align with what’s specified in the Figma kit:
|
@Kritvi-bhatia17 I believe all the issues are now resolved except for
For that we can open a new ticket to confirm and address |
There was a problem hiding this comment.
Hi Anna! Thanks for fixing everything—this looks great!
Just one last point: in the case of the default and fluid filterable multi-select, when I open the menu and click on it again, the focus border changes from 2px to 1px, and the menu doesn’t close (unlike the combobox). Not sure if this is a bug. Oh I checked the current storybook aswell I think that is also present over there so maybe can be solved separately, up to you to decided.
Screen.Recording.2025-01-16.at.9.09.33.PM.mov
Also, a quick question—should I review the web components Storybook as well, or just focus on the Carbon v11 Storybook?
@Kritvi-bhatia17 oh! Hmm I think we can open a separate ticket for that since it's an existing issue, I don't want it to hold up the rest of the work in this PR. The changes are only in the React Carbon v11 Storybook for now, the parity work should help to bridge that gap with web-components |
Closes #18071
Update focus states depending on if there are selected items and if user clicks/enters or presses arrow down for the following components:
Following this figma kit
Changelog
Changed
Removed
Testing / Reviewing
Go to deploy preview check the click/enter/arrow-down interactions for the above mentioned components and make sure it follows this figma kit