Skip to content

mat-dialog-close wrongly adds an aria-label when the button text content is bound rather than static #15542

@stevenyxu

Description

@stevenyxu

What is the expected behavior?

When I have <button mat-dialog-close>Submit</button> in a template, I expect for the resulting HTML to be basically the same, and mat-dialog-close should not add an aria label to the button.

What is the current behavior?

<button mat-dialog-close aria-label="Close dialog">Submit</button>

What are the steps to reproduce?

https://stackblitz.com/edit/angular-j9paiz?file=app/dialog-overview-example-dialog.html

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Head.

Is there anything else we should know?

This area was partly addressed in #11093 but has this remaining bug. A workaround is available (just set aria-label explicitly in addition to the inner content), but this is not ideal.

stevenyxu@6645309 demonstrates the bug in the form of a failing unit test. I tried to do a fix but couldn't quickly come up with a performant solution without more work.

Metadata

Metadata

Assignees

Labels

AccessibilityThis issue is related to accessibility (a11y)GThis is is related to a Google internal issueP2The issue is important to a large percentage of users, with a workaround

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions