AVT- Dropdown list- Focused item is not visible when color is removed

[kcchen-tw]

Title

When colour is removed, the focused item in dropdown list is not visible.

Environment

Browser
FF 67.03

Detailed description

What did you expect to happen?

• A distinguishable visual focus indicator helps keyboard-only users locate the point of focus.

What happened instead?

• The focus is not visible when you try to select any option on the menu.

Steps to reproduce the issue

1. Step one: To remove color follow next steps:
   For Firefox®:
   • Select Tools >Options.
   • On the Language and Appearance section select Colors... button.
   • On the Colors window go to Override the colors specified by the page with your selections above: and open the menu and select Always, then press OK.
   • On the Advance button deselect the Allow pages to choose their own fonts, instead of your selections above checkbox.
   • Select OK to save changes.

2. Step two:
   In url: http://react.carbondesignsystem.com/?path=/story/dropdown--default
   

Please create a reduced test case in CodeSandbox

• Style and vanilla JS:
  https://codesandbox.io/s/carbon-components-getting-started-t3ec6
• React:
  https://codesandbox.io/s/codesandbox-bxf8v

Additional information

It seems only the Vanilla JS has visible focus indicator:

• Notes

[emyarod]

hi @kcchen-tw thanks for reporting this! yeah it seems the React dropdown changes the background color to indicate the selected item, opened #3124 to add focus outline to highlighted React dropdown items

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale]

As there's been no activity since this issue was marked as stale, we are auto-closing it.