material-components-web icon indicating copy to clipboard operation
material-components-web copied to clipboard

[mdc-select] Dropdown arrows not visible in high contrast mode (dark theme)

Open mmlouie opened this issue 3 years ago • 0 comments
trafficstars

Bug report

In high contrast mode/dark color background, the dropdown arrow icon is not visible against the background.

Steps to reproduce

  1. Go to demo select page at https://material-components.github.io/material-components-web-catalog/#/component/select
  2. Activate high contrast mode / dark background (Windows HCM with High Contrast Black theme, or Chrome Devtools Rendering mode to emulate HCM with forced-colors:active and prefers-color-scheme:dark)

Actual behavior

Dropdown arrow is not visible in right side of select box.

Expected behavior

Dropdown arrow should appear white against the dark background.

Your Environment:

Software Version(s)
MDC Web Latest
Browser/OS Mac OSX/Chrome (emulating HCM), Windows with Chromium browser (Edge or Chrome)

Additional context

In the demo page, the dropdown uses an i element with an SVG set as the background image, and I don't know whether this is adjustable via HCM techniques or not.

The documentation uses an svg element directly, so I'm not sure whether this actually adjusts properly on HCM or not. If it works anything like how mdc-checkboxes work, this can be adjusted with a fill:currentColor setup as suggested in https://github.com/material-components/material-components-web/issues/7671

mmlouie avatar Aug 04 '22 19:08 mmlouie