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.

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

fix(material/badge): remove the console warning #29800

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

naaajii
Copy link
Contributor

@naaajii naaajii commented Sep 28, 2024

fix(material/badge): remove the console warning

removes the console.warn when badge is used with aria hidden mat-icon

fixes #27796


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

removes the console.warn when badge is used with aria hidden `mat-icon`

fixes angular#27796
@naaajii naaajii requested a review from a team as a code owner September 28, 2024 20:46
@naaajii naaajii requested review from crisbeto and amysorto and removed request for a team September 28, 2024 20:46
Copy link
Contributor Author

@naaajii naaajii Sep 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@wagnermaciel @AleksanderBodurri

continuing from this reply i basically have questions regarding for not interactive elements:

  1. mat-icon also fall will same principal as quoted from link above?
  2. currently badge with mat-icon produces following markup:
<mat-icon matBadge="7">
  <span class="mat-badge">7</span>
</mat-icon>

the mat-badge should append a span with the description as the next sibling to the element that has the badge on it.

after span change is the following markup valid?

<mat-icon matBadge="7" matBadgeDescription="this is description">
  <span class="mat-badge">7</span>
</mat-icon>
<span class="cdk-visually-hidden">this is description</span>

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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant