fix(material/badge): warn if use with mat-icon (#27368)

* fix(material/badge): warn if use with mat-icon

prior this commit there was no warning for matBadge being use with <mat-icon> as it is aria-hidden by default which means badge content is invisible to screen readers

fixes #27035

* fixup! fix(material/badge): warn if use with mat-icon

Author: naaajii

src/material/badge/badge.ts

@@ -156,6 +156,22 @@ export class MatBadge extends _MatBadgeBase implements OnInit, OnDestroy, CanDis
       if (nativeElement.nodeType !== nativeElement.ELEMENT_NODE) {
         throw Error('matBadge must be attached to an element node.');
       }
+
+      const matIconTagName: string = 'mat-icon';
+
+      // Heads-up for developers to avoid putting matBadge on <mat-icon>
+      // as it is aria-hidden by default docs mention this at:
+      // https://material.angular.io/components/badge/overview#accessibility
+      if (
+        nativeElement.tagName.toLowerCase() === matIconTagName &&
+        nativeElement.getAttribute('aria-hidden') === 'true'
+      ) {
+        console.warn(
+          `Detected a matBadge on an "aria-hidden" "<mat-icon>". ` +
+            `Consider setting aria-hidden="false" in order to surface the information assistive technology.` +
+            `\n${nativeElement.outerHTML}`,
+        );
+      }
     }
   }