{"record":{"id":"006e85d427fa5c17","repo":"angular/components","slug":"detected-a-matbadge-on-an-aria-hidden-mat-icon","errorCode":null,"errorMessage":"Detected a matBadge on an \"aria-hidden\" \"<mat-icon>\". Consider setting aria-hidden=\"false\" in order to surface the information assistive technology.","messagePattern":"Detected a matBadge on an \"aria-hidden\" \"<mat-icon>\"\\. Consider setting aria-hidden=\"false\" in order to surface the information assistive technology\\.","errorType":"console","errorClass":null,"httpStatus":null,"severity":"warning","filePath":"src/material/badge/badge.ts","lineNumber":232,"sourceCode":"      this._badgeElement = this._createBadgeElement();\n      this._updateRenderedContent(this.content);\n    }\n\n    this._isInitialized = true;\n  }\n\n  ngAfterViewInit() {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      const nativeElement = this._elementRef.nativeElement;\n\n      // Heads-up for developers to avoid putting matBadge on <mat-icon>\n      // as it is aria-hidden by default docs mention this at:\n      // https://material.angular.dev/components/badge/overview#accessibility\n      if (\n        nativeElement.tagName.toLowerCase() === 'mat-icon' &&\n        nativeElement.getAttribute('aria-hidden') === 'true'\n      ) {\n        console.warn(\n          `Detected a matBadge on an \"aria-hidden\" \"<mat-icon>\". ` +\n            `Consider setting aria-hidden=\"false\" in order to surface the information assistive technology.` +\n            `\\n${nativeElement.outerHTML}`,\n        );\n      }\n    }\n  }\n\n  ngOnDestroy() {\n    // ViewEngine only: when creating a badge through the Renderer, Angular remembers its index.\n    // We have to destroy it ourselves, otherwise it'll be retained in memory.\n    if (this._renderer.destroyNode) {\n      this._renderer.destroyNode(this._badgeElement);\n      this._inlineBadgeDescription?.remove();\n    }\n\n    this._ariaDescriber.removeDescription(this._elementRef.nativeElement, this.description);\n  }","sourceCodeStart":214,"sourceCodeEnd":250,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/badge/badge.ts#L214-L250","documentation":"A `matBadge` was placed on a `<mat-icon>` that has `aria-hidden=\"true\"`. Because mat-icon hides itself from assistive technology by default, the badge content (like a notification count) would be invisible to screen readers. The badge directive warns in dev mode after view init and suggests explicitly exposing the icon.","triggerScenarios":"Template like `<mat-icon matBadge=\"3\" aria-hidden=\"true\">mail</mat-icon>` — the directive's `ngAfterViewInit` checks the host's tag name and `aria-hidden` attribute; also triggered when `aria-hidden=\"true\"` is set via host binding on mat-icon.","commonSituations":"Notification badge on an icon button; developers add `aria-hidden=\"true\"` to mat-icon to silence icon announcements without realizing the badge carries meaningful info.","solutions":["Set `aria-hidden=\"false\"` on the mat-icon so the badge is announced.","Better: give the badge meaning via `matBadgeDescription`, e.g. `matBadgeDescription=\"3 unread messages\"`.","Or put the accessible label on the parent button and keep the icon hidden, ensuring the count is conveyed elsewhere."],"exampleFix":"<!-- before -->\n<mat-icon matBadge=\"5\" aria-hidden=\"true\">mail</mat-icon>\n\n<!-- after -->\n<mat-icon matBadge=\"5\" matBadgeDescription=\"5 unread messages\" aria-hidden=\"false\">mail</mat-icon>","handlingStrategy":"validation","validationCode":"const el = iconEl.nativeElement;\nif (el.hasAttribute('matBadge') && el.getAttribute('aria-hidden') === 'true') {\n  console.warn('Badge on aria-hidden icon; set aria-hidden=\"false\" or add matBadgeDescription.');\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Always pair matBadge with matBadgeDescription for accessible text.","Avoid blanket aria-hidden=\"true\" on mat-icon when it hosts meaningful content.","Lint templates for matBadge + aria-hidden combos."],"tags":["angular","material","badge","accessibility","aria"],"backgroundTag":"badge-on-aria-hidden-icon","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}