Tooltip content is visibly hidden but still in accessibility tree so it is read by VoiceOver

[davidhousedev]

Currently, this library only uses opacity to visibly hide the tooltip. It then makes its content available to screen readers by overriding the accessible name of the associated node. This leads to a situation where the content is visibly hidden but still present in the accessibility tree.

Various screen readers disagree about what to do with content that has opacity set to 0. Some screen readers will ignore this content, but VoiceOver reads it out. This means that VoiceOver effectively reads out the content of aria-label twice, once when the cursor is on the tooltip node itself, and again when the cursor is set to the ::after pseudo-element.

To replicate:

• Implement the tooltip in the DOM
• Open OSX VoiceOver
• Use VO-right to traverse the page
• Notice that VO will read out the tooltip node and will also stop on the ::after element, reading out the content again

In my own work, I got around this by setting display: none on the ::after element, then unsetting it on focus or hover. This breaks the animations in the tooltip, but provides, in my estimation, a better experience on a screen reader.