Skip to content

Wildcard: update multi select styles for better accessibility

Administrator requested to merge og/multiselect-issues-fix into main

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

  1. 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
  2. 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

  1. Open storybook: yarn storybook:wildcard and find Multiselect component
  2. Check that the cursor is pointer for the entire component
  3. Check that buttons inside have hover styles
  4. Don't forget about the dark theme
  5. 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
  6. Check that there's no space above the first and below the last items in the dropdown

App preview:

Merge request reports

Loading