-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Description
Description
An active item in the mat-nav-list is visually designated as such only by a background color change, which alone is not enough to be WCAG AA 2.2 compliant, where they require an additional affordance outside of the color change in order to not be disruptive for users with a visibility impairment who may not notice the slight background color change
In our case, we are achieving this by applying a bolder font weight, however we are forced to do it in a way Angular Material does not support (we rely on an internal implementation detail, ie. CSS classes of mat-nav-list and mat-list-item), because the List component does not have a supported style override for active list item font or font weight
Reproduction
https://material.angular.dev/components/list/examples#list-navigation
Expected Behavior
Active navigation list item should be recognizable as such even it a user does not notice the background color change
Actual Behavior
Active navigation list item is not recognizable as such when a user does not notice the background color change
Environment
- Angular: v21
- CDK/Material: v21
- Browser(s): any
- Operating System (e.g. Windows, macOS, Ubuntu): any