fix(badge): aria-label not being updated if description changes (#14393)

When we create a new badge element, we set its `aria-label` to the description of the badge, however that `aria-label` doesn't update if the description changes. These changes update the label accordingly.

Author: crisbeto

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. */

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;