Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(badge): Badge should warn when used on an aria-hidden mat-icon #27035

Closed
jelbourn opened this issue May 4, 2023 · 1 comment · Fixed by #27368
Closed

feat(badge): Badge should warn when used on an aria-hidden mat-icon #27035

jelbourn opened this issue May 4, 2023 · 1 comment · Fixed by #27368
Labels
area: material/badge feature This issue represents a new feature or feature request rather than a bug or bug fix P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@jelbourn
Copy link
Member

jelbourn commented May 4, 2023 •
edited
Loading

Feature Description

From usages across Google, we've seen that's it's common for devs to put matBadge on <mat-icon>. The problem is that <mat-icon> is aria-hidden by default, meaning that the badge content is also invisible to screen readers. Our documentation already calls this out as a misuse of the badge, but we can go a step further and actually produce a console warning. This would look something roughly like

if (ngDevMode && host.nodeName === 'mat-icon' && host.getAttribute('aria-hidden') === 'true') {
  console.warn('Warning: detected matBadge on a "<mat-icon>" with "aria-hidden="true"\n${host.outerHTML}');
}
@jelbourn jelbourn added feature This issue represents a new feature or feature request rather than a bug or bug fix P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent area: material/badge labels May 4, 2023
naaajii added a commit to naaajii/components that referenced this issue May 15, 2023
@naaajii
feat(material/badge): warn if used with mat-icon
f615a4a 
prior this commit there was no warning for matBadge being used with matIcon which means badge content is not visible to screen readers

Closes angular#27035
@naaajii naaajii mentioned this issue May 15, 2023
Closed
naaajii added a commit to naaajii/components that referenced this issue Jun 26, 2023
@naaajii
feat(material/badge): warn if use with mat-icon
a846351 
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 angular#27035
@naaajii naaajii mentioned this issue Jun 26, 2023
Merged
naaajii added a commit to naaajii/components that referenced this issue Jun 27, 2023
@naaajii
fix(material/badge): warn if use with mat-icon
50a395a 
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 angular#27035
crisbeto pushed a commit that referenced this issue Jun 28, 2023
@naaajii
fix(material/badge): warn if use with mat-icon (#27368)
65c7cad 
* 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
crisbeto pushed a commit that referenced this issue Jun 28, 2023
@naaajii @crisbeto
fix(material/badge): warn if use with mat-icon (#27368)
5c066ba 
* 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

(cherry picked from commit 65c7cad)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Jul 29, 2023
stephenrca pushed a commit to stephenrca/components that referenced this issue Aug 2, 2023
@naaajii @stephenrca
fix(material/badge): warn if use with mat-icon (angular#27368)
2bad135 
* 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 angular#27035

* fixup! fix(material/badge): warn if use with mat-icon
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
area: material/badge feature This issue represents a new feature or feature request rather than a bug or bug fix P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
2 participants
@jelbourn @zarend