[Accessibility] No class added to multi-value on keyboard nav

[wilfredjonathanjames]

Bug

Behaviour

Selects with unstyled isMulti classNamePrefix="prefix" do not set *--is-focused or *--is-selected classes on multi-value components when keyboard navigating.

The isFocused flag works as expected when using the style={{multiValue: ...}} prop. However for those of us using css files this method requires splitting styles between inline and file, which has a negative impact on readability.

Expected behaviour

Set *--is-focused, *--is-selected or similar on multi-value elements and their children when keyboard navigating.

Version

react-select@5.8.0

Code

<ReactSelect
  unstyled
  isMulti
  classNamePrefix="prefix"
  defaultValue={["Test One", "Test Two"].map(v => ({
    value: v,
    label: v,
  }))}
/>

Repro

1. Focus the input and press the left arrow key to select a default option. With devtools open, notice that no class is added or changed on multi-value elements.
2. Remove the unstyled prop and repeat the previous step. Notice that a blush is added to the remove button of keyboard navigated multi-values.
3. Replace the unstyled prop and add the following styles prop. Notice that react-select sets the background on keyboard navigation correctly

  styles={{
    multiValue: (baseStyles, { isFocused }) => ({
      background: isFocused ? "tomato" : "",
      ...baseStyles,
    }),
  }}