Tooltip content is not pronounced by VoiceOver using Safari

atomiks / tippyjs

Tooltip, popover, dropdown, and menu library

https://atomiks.github.io/tippyjs/

MIT License

11.86k stars 520 forks source link

Tooltip content is not pronounced by VoiceOver using Safari #1045

Open nlavri opened 2 years ago

nlavri commented 2 years ago

Bug description

Tooltip content is not pronounced by VoiceOver on Safari iOS 15.3.1

Reproduction

Open Tippy demo page - Interactive section - https://atomiks.github.io/tippyjs/#interactivity

Tap "Interactivity" heading
Swipe right a few times to focus on button with text "Interactive"

Actual Result: Tooltip is shown but it's content is not pronounced.
Swipe right one more time Actual Result: Focus moved forward and tooltip content still skipped.

atomiks commented 2 years ago

Interactive tippies don't announce the content by default. In this case the VoiceOver modifier keys are used to select and read out the text in that example.

However you can also make it announce interactive content like a regular tooltip, aria: {content: 'describedby'}.

https://atomiks.github.io/tippyjs/v6/all-props/#aria

nlavri commented 2 years ago

Thanks for the response. On the same demo page non-interactive tooltip is also not pronounced on iOS Safari 15.3.1 (e.g. Default section on top of the demo page). And aria: {content: 'describedby'} doesn't help unfortunatelly. Btw don't have preferences on interative/non-interactive Tippy.

atomiks commented 2 years ago

Sorry I'm not sure how to test iOS VoiceOver. It works on Mac's Safari. Maybe it has something to do with when the aria-describedby attribute gets added. It happens async (in an anim frame or microtask IIRC), so possibly it needs to be moved earlier on in the execution

aloayzab88 commented 2 years ago

By the way this is not working with Windows Narrator either. The problem looks to me that the role tooltip is added to the wrapper and not the content itself, for example this plugin is working correctly https://a11y.nicolas-hoffmann.net/simple-tooltip/

atomiks commented 2 years ago

@aloayzab88 good spot, the id is on the outer popper node, while the role is on the inner box node. If you place the role="tooltip" on the outer popper instead, does it get announced?

aloayzab88 commented 2 years ago

@atomiks yes it does. I'm not that good with js but I just added popper.setAttribute('role', 'tooltip'); in the line 675 of tippy.umd.js and the content get announced. Although I dont know how to make it take the value of the role property or clear it after the tooltip is gone.