bug(mat-chip-grid): no aria-activedescendant

[drc-nloftsgard]

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

Below is the output from Evinced when testing usage of mat-chip-grid both in our application and at https://material.angular.dev/components/chips/overview#chips-connected-to-an-input-field

Type: Missing active descendant

Summary: For composite UI elements using aria-activedescendant for keyboard navigation, the attribute must reference the ID of the active element in the group. If no element is active, it must be set to an empty string.

Cause:
The aria-activedescendant is entirely absent from the composite UI element.

Effect:
Screen readers may provide inaccurate information, leading to difficulties for keyboard and screen reader users in navigating and interacting with the component.

Suggested Solution:
Ensure that the aria-activedescendant attribute is pointing to the ID of an appropriate child element, according to the role of the composite UI element. When users navigate between children using the arrow keys, the aria-activedescendant attribute should be updated accordingly.

Selector: mat-chip-grid

HTML Snippet:

 <!--NOTE: snippet was trimmed due to its size--><mat-chip-grid _ngcontent-ng-c4270193721="" aria-label="Fruit selection" class="mat-mdc-chip-set mat-mdc-chip-grid mdc-evolution-chip-set" aria-hidden="false" role="grid" tabindex="0" aria-disabled="false" aria-invalid="false"><div role="presentation" class="mdc-evolution-chip-set__chips"><mat-chip-row _ngcontent-ng-c4270193721="" class="mat-mdc-chip mat-mdc-chip-row mdc-evolution-chip mat-primary mdc-evolution-chip--with-trailing-action mat-mdc-standard-chip mat-mdc-chip-with-trailing-icon ng-star-inserted" mat-ripple-loader-uninitialized="" mat-ripple-loader-class-name="mat-mdc-chip-ripple" mat-ripple-loader-disabled="" id="mat-mdc-chip-0" role="row" tabindex="-1"><span class="mat-mdc-chip-focus-overlay ng-star-inserted"></span><span role="gridcell" matchipaction="" class="mdc-evolution-chip__action mat-mdc-chip-action mdc-evolution-chip__cell mdc-evolution-chip__cell--primary mdc-evolution-chip__action--primary" aria-describedby="mat-mdc-chip-0-aria-description" tabindex="-1" aria-disabled="false"><span cl

Component: undefined
Knowledge Base: https://knowledge.evinced.com/system-validations/missing-active-descendant
WCAG Violations: 1.3.1 Info and Relationships (Level A)
Evinced Severity: CRITICAL

Reproduction

Mat Chip Grid connected to input
Steps to reproduce:

1. Observe there is no aria-activedescendant on mat-chip-grid indicating no current keyboard selection
2. Set keyboard focus to any of the chips in the mat-chip-grid component
3. Observe that aria-activedescendant still does not exist to indicate which chip is currently selected

Expected Behavior

Expected to see aria-activedescendant on mat-chip-grid relating to the id of the mat-chip-row, which implies a unique id on mat-chip-row or an element within.

Actual Behavior

Actual behavior is mat-chip-grid does not handle aria-activedescendant when properly implemented as defined in the Chip documentation page

Environment

• Angular: 20.3.14
• CDK/Material: 20.2.14
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): confirmed on MacOS and Windows