WB-1675: Implement Combobox component with single selection #2221
Conversation
This file contains 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
🦋 Changeset detectedLatest commit: 379fee2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 8 packages
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 |
|
Size Change: +1.35 kB (+1.39%) Total Size: 98.2 kB
ℹ️ View Unchanged
|
A new build was pushed to Chromatic! 🚀https://5e1bf4b385e3fb0020b7073c-tctnhwhcfo.chromatic.com/ Chromatic results:
|
Codecov ReportAttention: Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #2221 +/- ##
==========================================
+ Coverage 94.44% 94.67% +0.23%
==========================================
Files 248 249 +1
Lines 29387 29855 +468
Branches 2414 1806 -608
==========================================
+ Hits 27754 28265 +511
+ Misses 1629 1573 -56
- Partials 4 17 +13
... and 41 files with indirect coverage changes Continue to review full report in Codecov by Sentry.
|
GeraldRequired Reviewers
Don't want to be involved in this pull request? Comment |
npm Snapshot: Published🎉 Good news!! We've packaged up the latest commit from this PR (f5a3ab0) and published all packages with changesets to npm. You can install the packages in webapp by running: ./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2221"Packages can also be installed manually by running: yarn add @khanacademy/wonder-blocks-<package-name>@PR2221 |
jeresig
approved these changes
May 7, 2024
jandrade
added a commit
that referenced
this pull request
Aug 27, 2024
## Summary: Create the multiple version that displays the selected values as individual Pill components that can be deleted/unchecked. Added a new hook to manage keyboard navigation for the multiple selection logic. ### Combobox Implementation Plan: 1. #2216 2. #2221 3. **Add multiple selection support to `Combobox` component.[CURRENT]** 4. Improve accessibility support on Combobox (labels, aria-live). 5. Add autocomplete support to `Combobox` component. 6. Add async/dynamic support to `Combobox` component. Issue: https://khanacademy.atlassian.net/browse/WB-1676 ## Test plan: 1. Navigate to: /?path=/docs/packages-dropdown-combobox--docs#multiple%20selection 2. Use the multi-select version of the Combobox. 3. Navigate using the keyboard. 4. Verify that you can select multiple options and can delete selected options using the keyboard. ### Keyboard navigation instructions (when the combobox is focused): - `Arrow Up | Arrow Down`: to navigate the listbox options - `Arrow left | Arrow right`: to navigate the selected options (pills displayed before the input) - `Backspace`: removes the last pill in the stack - `Enter`: - When the listbox is focused: unselects an option from the list - When the pills are focused: removes the currently focused pill and unselects the associated option in the listbox. https://github.com/Khan/wonder-blocks/assets/843075/7ad1476a-df73-42e0-87a3-2e7bf80c6b77 Author: jandrade Reviewers: jeresig Required Reviewers: Approved By: jeresig Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ⏭️ dependabot Pull Request URL: #2223
jandrade
added a commit
that referenced
this pull request
Aug 28, 2024
…eaders (#2225) ## Summary: This PR focuses on bringing a better accessibility experience by adding a live region to announce the different combobox statuses: - When the visual focus changes in the listbox. - When the visual focus changes in the selected options (multi-select mode). - When it is closed. - Describing a state for the focused option. e.g. `selected`, `disabled`. ### Combobox Implementation Plan: 1. #2216 2. #2221 3. #2223 4. **Improve accessibility support on Combobox (labels, aria-live).[CURRENT]** 5. Add autocomplete support to `Combobox` component. 6. Add async/dynamic support to `Combobox` component. Issue: https://khanacademy.atlassian.net/browse/WB-1676 ## Test plan: Turn on Voice Over and use Safari: ### Single Selection: 1. Navigate to: /iframe.html?args=&id=packages-dropdown-combobox--single-select-combobox&viewMode=story 2. Using the keyboard, open the listbox by focusing on the input then pressing `arrow down`. 3. Verify that the Screen Reader announces the selected item (`Pear selected, 3 of 9. 9 results available`). 4. Navigate on the listbox by using the arrow keys. 5. Verify that it announces the currently focused item (e.g. `Strawberry disabled, 2 of 9. 9 results available`). 6. Using the keyboard, Select one of the enabled options. 7. Verify that it announces the selection (e.g. `Apple selected`) and the listbox is closed. https://github.com/user-attachments/assets/dd7f6173-e00b-4a96-bed3-c5b0df6c2fbd ### Multiple Selection: 1. Navigate to /iframe.html?args=&id=packages-dropdown-combobox--multiple-selection&viewMode=story 2. Using the keyboard, open the listbox by focusing on the input then pressing `arrow down`. 3. Verify that the Screen Reader announces the selected item (`Pear selected, 3 of 9. 9 results available`). 4. Navigate on the listbox by using the arrow keys. 5. Verify that it announces the currently focused item (e.g. `Strawberry disabled, 2 of 9. 9 results available`). 6. Using the keyboard, Select one of the enabled options (pressing `Enter` on the focused option). 7. Verify that it announces the selection (e.g. `Apple selected, 5 of 9. 9 results available.`) and the listbox remains open). 9. Press arrow left or arrow right to move visual focus to the selected pills. 10. Verify that the focus moves to one of the pills and SR announces that (e.g. `Grape focused, 3 of 3. 3 selected options`). https://github.com/user-attachments/assets/80a6eabc-ef82-4828-8c18-ed8e05bf8fee Author: jandrade Reviewers: beaesguerra, jandrade Required Reviewers: Approved By: beaesguerra Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Lint (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ gerald, ⏭️ dependabot Pull Request URL: #2225
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary:
This is the first PR associated to the Combobox implementation. It includes the
basic structure of the Combobox component with single selection support.
Combobox Implementation Plan:
Listboxcomponent with Single and Multiple selection support #2216Comboboxcomponent with Single selection support. [CURRENT]Comboboxcomponent.Comboboxcomponent.Comboboxcomponent.Issue: https://khanacademy.atlassian.net/browse/WB-1675
Test plan:
Verify that the new
Componentcomponent works as expected and that the newdocumentation is accurate.
/?path=/docs/packages-dropdown-combobox--docs
https://5e1bf4b385e3fb0020b7073c-mzmurnrasq.chromatic.com/?path=/docs/packages-dropdown-combobox--docs
Keyboard navigation:
ArrowDown / ArrowUpkeys to navigate through the options.Enterkey to select an option.Escapekey to close the Listbox.Screen.Recording.2024-05-01.at.3.10.07.PM.mov