Skip to content

fix(material/badge): insert inline description for non-interactive hosts #27025

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

Merged
merged 1 commit into from
May 9, 2023
Merged

fix(material/badge): insert inline description for non-interactive hosts #27025

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/dev-app/badge/badge-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ <h3>Buttons</h3>

<div class="demo-badge">
<h3>Icons</h3>
<mat-icon [matBadge]="badgeContent">
<mat-icon [matBadge]="badgeContent" matBadgeDescription="This is a home indicator">
home
</mat-icon>

Expand Down
14 changes: 8 additions & 6 deletions src/material/badge/badge.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,12 @@ background color to `primary`, `accent`, or `warn`.
"region":"mat-badge-color"}) -->

### Accessibility
Badges should be given a meaningful description via `matBadgeDescription`. This description will be
applied, via `aria-describedby` to the element decorated by `matBadge`.

When applying a badge to a `<mat-icon>`, it is important to know that the icon is marked as
`aria-hidden` by default. If the combination of icon and badge communicates some meaningful
information, that information should be surfaced in another way. [See the guidance on indicator
You must provide a meaningful description via `matBadgeDescription`. When attached to an interactive
element, `MatBadge` applies this description to its host via `aria-describedby`. When attached to
a non-interactive element, `MatBadge` appends a visually-hidden, inline description element. The
badge determines interactivity based on whether the host element is focusable.

When applying a badge to a `<mat-icon>`, it is important to know that `<mat-icon>` is
`aria-hidden="true"` by default. If the combination of icon and badge communicates meaningful
information, always surface this information in another way. [See the guidance on indicator
icons for more information](https://material.angular.io/components/icon/overview#indicator-icons).
Loading