diff --git a/src/lib/badge/badge.spec.ts b/src/lib/badge/badge.spec.ts index 2152085d489a..8933239d52c1 100644 --- a/src/lib/badge/badge.spec.ts +++ b/src/lib/badge/badge.spec.ts @@ -165,6 +165,25 @@ describe('MatBadge', () => { expect(element.classList).toContain('mat-badge-disabled'); }); + it('should update the aria-label if the description changes', () => { + const badgeContent = badgeNativeElement.querySelector('.mat-badge-content')!; + + fixture.componentInstance.badgeDescription = 'initial content'; + fixture.detectChanges(); + + expect(badgeContent.getAttribute('aria-label')).toBe('initial content'); + + fixture.componentInstance.badgeDescription = 'changed content'; + fixture.detectChanges(); + + expect(badgeContent.getAttribute('aria-label')).toBe('changed content'); + + fixture.componentInstance.badgeDescription = ''; + fixture.detectChanges(); + + expect(badgeContent.hasAttribute('aria-label')).toBe(false); + }); + }); /** Test component that contains a MatBadge. */ diff --git a/src/lib/badge/badge.ts b/src/lib/badge/badge.ts index 9d4e2e1d4f92..e079402e41ef 100644 --- a/src/lib/badge/badge.ts +++ b/src/lib/badge/badge.ts @@ -94,8 +94,14 @@ export class MatBadge extends _MatBadgeMixinBase implements OnDestroy, CanDisabl get description(): string { return this._description; } set description(newDescription: string) { if (newDescription !== this._description) { + const badgeElement = this._badgeElement; this._updateHostAriaDescription(newDescription, this._description); this._description = newDescription; + + if (badgeElement) { + newDescription ? badgeElement.setAttribute('aria-label', newDescription) : + badgeElement.removeAttribute('aria-label'); + } } } private _description: string;