bug(mat-chip-grid): mat-error instances are not exposed to screen reader users

[ByzantineFailure]

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

When a mat-chip-grid has a mat-error associated with it SR users do not hear the error when they focus the grid or its associated matChipInput.

Reproduction

Steps to reproduce:

1. Load this stackblitz: https://stackblitz.com/edit/components-issue-keh175
2. Turn on the Screen Reader of your choice
3. Tab to the chip input
4. Enter any value and hit enter. You should see an error appear and you should hear it be announced.
5. Tab back to the button above or the button below, then tab back to either the input or chip grid

Expected Behavior

The SR reads out the error message when the user focuses either the chip grid or the chip input.

Actual Behavior

The SR does not read out the error message. Additionally, it does not indicate that the field is invalid until the matChipInput is focused. This seems to be the result of the on-focus behavior of MatChipGrid combined with the way the form field is associating the error with its control.

When a form field has an error associated with it, AM will generally try to add aria-describedby=ERROR_ELEMENT_ID. In this particular case, the control that the error is associated with is the mat-chip-grid element. However, when focus lands on a chip grid it focuses the first chip if any are available, or otherwise moves the focus to the input if one is present. Effectively, this means that the user cannot ever hear the error message be announced while focused on the control itself.

Environment

• Angular: 13.2.5
• CDK/Material: 13.2.5
• Browser(s): Any
• Operating System (e.g. Windows, macOS, Ubuntu): Any

[ByzantineFailure]

This might be solvable by updating mat-chip-grid to propagate its aria-describedby value to the matChipInput associated with it.