Search: Autocomplete color contrast in Chrome

[SimonFinney]

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

Cancel search icon button color contrast is off due to recently introduced skyblue background color for autofill in Chrome - https://support.google.com/docs/thread/4024179?hl=en

[j1mie]

There are two approaches to fixing this:

1. Fix the icon fill for the offending pseudo classes
   .bx--search-input:-internal-autofill-selected ~ .bx--search-close { fill: currentColor; }

2. Ensure that the background color of the clear button is no longer transparent.

I used the first option as a quick fix in our project, but I'm thinking now that I prefer the second option as a longer term fix because it doesn't involve going down the road of learning / overwriting strange browser-specific pseudo classes.

[abbeyhrt]

HI @SimonFinney Thanks for bringing this to our attention! What browser are you finding this in and would you be able to provide a code sandbox reproducing this problem? At first glance, this issue seems to come from your implementation of the Search component. The icons in our Search component are black by default and pass color contrast with the new skyblue autofill color.

[abbeyhrt]

Closing this since a solution is posted above! Re-open if anyone feels like the problem still needs to be addressed 👍

[SimonFinney]

@abbeyhrt I believe this will be affected in darker themes, like gray 100, where the icon defaults to white. Unfortunately, I don't have the permissions to reopen this issue but it still exists.

[j1mie]

Can confirm that this issue exists on Chrome 78, OSX. We should reopen this issue.

[abbeyhrt]

@SimonFinney thanks for pointing that out! Reopening for further investigation