Skip to content

bug(mat-nav-list): Active item not accessible enough #32716

@kainiedziela

Description

@kainiedziela

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    needs triageThis issue needs to be triaged by the team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions