Tooltip component uses tooltip role and when it becomes visible the generated id of the tooltip is defined as the aria-describedby of the target.
The target (i.e. the element that causes the tooltip to open on hover or focus) does not have any aria-describedby applied to it by default. And if I apply aria-describedby to the target manually, the id of the tooltip does not correspond to the aria-describedby value as stated by the documentation.
Click on the input (or otherwise focus it). The tooltip appears. In your browser's devtools, locate the tooltip and the input element. Observe that the id of the tooltip does not correspond to the aria-describedby value that I defined on the input.
If you have VoiceOver or another screen reader, you can also try interacting with the target element and notice that the tooltip is not read aloud.
Expected behavior
The id of the tooltip should correspond to the aria-describedby value that I defined on the input. I would also expect that if there is no aria-describedby on the target, that this attribute would be added based on the generated id value of the tooltip.
IAfanasov
commented
4 months ago
Describe the bug
The tooltip does not work properly with screen readers.
According to the accessibility documentation for Tooltip:
The target (i.e. the element that causes the tooltip to open on hover or focus) does not have any
aria-describedbyapplied to it by default. And if I applyaria-describedbyto the target manually, theidof the tooltip does not correspond to thearia-describedbyvalue as stated by the documentation.Reproducer
https://stackblitz.com/edit/nuxt-starter-urhx2c?file=app.vue
PrimeVue version
3.52.0
Vue version
3.x
Language
TypeScript
Build / Runtime
Nuxt
Browser(s)
No response
Steps to reproduce the behavior
Click on the input (or otherwise focus it). The tooltip appears. In your browser's devtools, locate the tooltip and the input element. Observe that the
idof the tooltip does not correspond to thearia-describedbyvalue that I defined on the input.If you have VoiceOver or another screen reader, you can also try interacting with the target element and notice that the tooltip is not read aloud.
Expected behavior
The
idof the tooltip should correspond to thearia-describedbyvalue that I defined on the input. I would also expect that if there is noaria-describedbyon the target, that this attribute would be added based on the generatedidvalue of the tooltip.