Wildcard: update multi select styles for better accessibility
Created by: oleggromov
Problem
As described in https://github.com/sourcegraph/sourcegraph/issues/32560, there's a bunch of small accessibility/usability issues with the Multiselect
component implementation.
Solution
- Add cursor: pointer for the entire thing
- Add hover colors for buttons inside the select
- Remove paddings in the dropdown
- Remove box-shadow from the multi select remove button
https://user-images.githubusercontent.com/2196347/161976969-bc7a0cdd-265f-452f-8ea7-3aa2379f1bbb.mov
What hasn't been fixed
- Three different background colors. I agree that having a check mark near selected items would probably make more sense - however, there's no way of doing so in
react-select
that we use - I haven't made the "x" button on selected items work because IMO the implementation will be too complicated for to the outcome - we now have ability to press backspace anyways
Test plan
- Open storybook:
yarn storybook:wildcard
and findMultiselect
component - Check that the cursor is
pointer
for the entire component - Check that buttons inside have hover styles
- Don't forget about the dark theme
- Navigating with keyboard left and right keys still focuses the remove button and pressing backspace would delete an option. However, I haven't found a way of making spacebar or enter trigger the same
- Check that there's no space above the first and below the last items in the dropdown