Select/Multiselect active descendent is the same colour as already selected items, affecting Keyboard users

[Paul-Grogan]

Environment

Operating system: Windows10

Browser: Firefox 84, Chrome 87.0.4280.88, Edge 87.0.664.66

Detailed description

The active descendent in the multiselect uses the same colour as a selected item. This results in it being difficult for a keyboard user to know where they are in the list (without having to either count key presses or toggling the selection to find where they are).
See the screenshot.

What version of the Carbon Design System are you using?
Vanilla Components version
React Components version ^7.25.0
Last updated 11 December 2020

What did you expect to happen?
It would be easy to tell the difference between selected items and the currently active descendent.

What happened instead?
No colour change

What WCAG 2.1 checkpoint does the issue violate?
2.4.7: Focus Visible
Specifically
Benefits
This Success Criterion helps anyone who relies on the keyboard to operate the page, by letting them visually determine the component on which keyboard operations will interact at any point in time.
People with attention limitations, short term memory limitations, or limitations in executive processes benefit by being able to discover where the focus is located.

While the input does have a focus indicator and is ready to accept text when the user types, the options list part of the component doesn't satisfy this.

Steps to reproduce the issue

1. Navigate a browser to: https://www.carbondesignsystem.com/components/dropdown/usage#live-demo
2. Change the Variant selector to either the Multiselect or Filterable Multiselect
   NOTE: the Select and Drop Down variants have this problem too, but because there's only one item selectable it's not as intrusive.
3. Using only the keyboard, open the drop down list from the multiselect
4. Using the arrow keys, make an option active and select it with Enter, repeat this to select multiple items.
5. Using the arrow keys again, make any of the selected items active.

Additional information

• Screenshots or code
• Notes

[dakahn]

Agree that active and selected menu items are similar enough to be difficult to spot for magnification/low vision users.

[dakahn]

We're getting AVT teams reporting this as a contrast violation as well

[aagonzales]

Solution
The "active" state for the "selected" items should be a background color change using $hover-selected-ui

Bug
That same token should also be used for the hover state of the selected items. Right now the hover is going lighter because it's using the wrong token.

[kgibb]

This issue has regressed.

https://github.com/carbon-design-system/carbon/pull/7777/files#diff-2d8f4b8c5cc37d2869d1f6ac7a1a1ceb847d8634c26c7bf48fe69f0305dcd084R761