angular / angular/components

bug(mat-navigation-list): Navigation List active items should have on-secondary-container color

Open
#32,734 0 comments 0 reactions 0 assignees View on GitHub
area: material/list P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Description

Currently, Navigation List active item has a secondary-container background, but does not use on-secondary-container color, which we find erroneous

### Reproduction

https://material.angular.dev/components/list/examples#list-navigation

### Expected Behavior

Navigation List active items should have color of on-secondary-container, since they have a background color of secondary-container

### Actual Behavior

Navigation List items do not update their color when set to active and remain on-surface even though their background is no longer surface

### Environment

- Angular: v21
- CDK/Material: v21
- Browser(s): any
- Operating System (e.g. Windows, macOS, Ubuntu): any

Contributor guide

Open the contributing guide

Research direction

Open the Navigation List example at material.angular.dev/components/list/examples#list-navigation and inspect how the active item is styled. Done means an active item keeps its secondary-container background and uses the on-secondary-container color instead of on-surface; verify the example behavior after the change.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.