angular / angular/components

bug(matTooltip): Add option to set aria-labelledby rather than aria-describedby

Open
#23,284 7 comments 11 reactions 0 assignees View on GitHub
Accessibility area: material/tooltip feature P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Reproduction

matTooltip is only able to apply aria-describedby to its host element. This is not optimal for host elements that have no aria-label or text contents.

#### Expected Behavior

What behavior were you expecting to see?

For a button with no textual label, eg a MatIconButton, a tooltip typically provides a label rather than a description.
Having matTooltip apply aria-labeledby rather than would be better in these cases.

At the very least, it would be good to have an Input to configure matTooltip's labeledby vs describedby preference.
Extra credit: change the default for obvious cases like MatIconButton.

#### Actual Behavior

What behavior did you actually see?

matTooltip applies aria-describedby, with no option to change this behavior.

#### Environment

- Angular: 12
- CDK/Material: 12
- Browser(s): any
- Operating System (e.g. Windows, macOS, Ubuntu): any

Contributor guide

Open the contributing guide

Research direction

Start by locating the matTooltip implementation and its existing accessibility behavior. Check how it applies aria-describedby to hosts, then define the supported aria-labelledby configuration and verify that tooltip labeling works for unlabeled buttons without regressing description behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.