bug(matTooltip): Add option to set aria-labelledby rather than aria-describedby
- 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
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