fix(material/badge): move inline description element to be next sibling

move inline description element to be next sibling where `matBadge` was applied instead of being within the non interactive element and invisible to screen readers

Author: naaajii

src/material/badge/badge.spec.ts

@@ -243,16 +243,16 @@ describe('MatBadge', () => {
       badgeHostNativeElement = badgeHostDebugElement.nativeElement;
     });
 
-    it('should insert the description inline after the host', () => {
+    it('should insert description as next sibling for host', () => {
       testComponent.description.set('Extra info');
       fixture.detectChanges();
 
-      const inlineDescription = badgeHostNativeElement.querySelector('.cdk-visually-hidden')!;
+      const inlineDescription = badgeHostNativeElement.nextSibling!;
       expect(inlineDescription)
         .withContext('A visually hidden description element should exist')
         .toBeDefined();
       expect(inlineDescription.textContent)
-        .withContext('The badge host next sibling should contain its description')
+        .withContext('The badge next sibling should contain its description')
         .toBe('Extra info');
 
       testComponent.description.set('Different info');
@@ -263,14 +263,34 @@ describe('MatBadge', () => {
         .toBe('Different info');
     });
 
-    it('should not apply aria-describedby for non-interactive hosts', () => {
+    it('should not apply aria-describedby for non-interactive host', () => {
       testComponent.description.set('Extra info');
       fixture.detectChanges();
 
       expect(badgeHostNativeElement.hasAttribute('aria-description'))
         .withContext('Non-interactive hosts should not have aria-describedby')
         .toBeFalse();
     });
+
+    it('should not insert description as next sibling if description is not provided', () => {
+      fixture.detectChanges();
+
+      expect(badgeHostNativeElement.nextSibling).toBeFalsy();
+    });
+
+    it('should not create multiple description elements if description changes', () => {
+      testComponent.description.set('one');
+      fixture.detectChanges();
+
+      let siblings = fixture.nativeElement.querySelectorAll('.cdk-visually-hidden');
+      expect(siblings.length).toBe(1);
+
+      testComponent.description.set('two');
+      fixture.detectChanges();
+
+      siblings = fixture.nativeElement.querySelectorAll('.cdk-visually-hidden');
+      expect(siblings.length).toBe(1);
+    });
   });
 });
 

src/material/badge/badge.ts

@@ -296,14 +296,23 @@ export class MatBadge implements OnInit, OnDestroy {
   }
 
   private _updateInlineDescription() {
+    // We do not need to need empty description element for non interactive elements.
+    if (!this.description) return;
+
     // Create the inline description element if it doesn't exist
     if (!this._inlineBadgeDescription) {
       this._inlineBadgeDescription = this._document.createElement('span');
       this._inlineBadgeDescription.classList.add('cdk-visually-hidden');
     }
 
     this._inlineBadgeDescription.textContent = this.description;
-    this._badgeElement?.appendChild(this._inlineBadgeDescription);
+    // We want to add the inline description element right after the not interactive element that
+    // badge is on therefore we can't use appendChild here as they will keep getting stacked in
+    // last.
+    this._elementRef.nativeElement.parentNode?.insertBefore(
+      this._inlineBadgeDescription,
+      this._elementRef.nativeElement.nextSibling,
+    );
   }
 
   private _removeInlineDescription() {