bug(mat-select): aria-owns and modal accessibility issue.

[lylebuchanan]

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 using a mat-select inside of a dialog the select applies the aria-owns attribute to the aria-modal="true" element when the select panel is opened. After a selection is made, a critical accessibility issue in axeDevTools v 4.8.2 with error "Ensures all ARIA attributes have valid values" appears. This is due to the previously applied aria-owns id no longer existing on the dom after a selection is made. The aria-owns attribute is only removed from the modal on destroy of the select.

Reproduction

StackBlitz link: https://stackblitz.com/edit/components-issue-mxpfyf?file=src%2Fapp%2Fexample-component.html
Steps to reproduce:

1. Open the modal.
2. Select an option
3. Scan with axeDevTools or inspect dom to see aria-owns still exists on mat-dialog-container

Expected Behavior

The aria-owns label is removed from mat-dialog-container when the select panel is closed.

Actual Behavior

The aria-owns label is only removed on destroy of the select.

Environment

• Angular: 16.2
• CDK/Material: 16.2
• Browser(s): chrome/edge
• Operating System (e.g. Windows, macOS, Ubuntu): windows

[emancol]

If nobody is working on it, Can I fix it? Thanks!