material-components-web
material-components-web copied to clipboard
[mdc-select] Dropdown arrows not visible in high contrast mode (dark theme)
trafficstars
Bug report
In high contrast mode/dark color background, the dropdown arrow icon is not visible against the background.
Steps to reproduce
- Go to demo select page at https://material-components.github.io/material-components-web-catalog/#/component/select
- 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