bug(material): activated nav-list-item font color is not readable in dark mode
- Dominant language
- TypeScript
- Stars
- 25k
- Forks
- 6.8k
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 91
Description
### Is this a regression?
- [ ] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
_No response_
### Description
I have an App that uses a sidenav with a nav-list inside. I want the activated nav-list-item to be noticeable, so I'm using that state, but the default behavior with a dark theme, results in an unreadable font color.
### Reproduction
StackBlitz link: https://stackblitz.com/edit/components-issue-3qaoos
Steps to reproduce:
1. Open it.
2. See how the first nav list item is activated and barely readable.
### Expected Behavior
The background and font color have a minimum contrast, so the item is readable.
### Actual Behavior
The background and font color do not have a minimum contrast, so the item is not readable.
### Environment
- Angular: 16.1.0
- CDK/Material: 16.1.5
- Browser(s): Chrome 116.0.5845.97 (Official Build) (64-bit)
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 11 (10.0.22621.2134)
Contributor guide
Research direction
Open the linked StackBlitz reproduction and inspect the Angular Material sidenav/nav-list behavior with the dark theme enabled. Verify the activated item’s foreground and background colors, then confirm the finished change meets the stated minimum contrast requirement in the reproduced scenario.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- accessibility, design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 38/100