React Tooltip text is not announced by VoiceOver upon focusing on the triggering element

[FrivalszkyP]

Environment

• MacOS 10.14.6
• Chrome, Safari

Assistive technology used to verify

• VoiceOver

Steps to reproduce the issue

This is super easy to reproduce and identify:

1. Open the Storybook with Chrome or Safari
2. Turn on VoiceOver and navigate to the button identified by the "Tooltip label" element.
3. The Tooltip component is displayed.
4. Wait for VoiceOver to announce the contents of the Tooltip

Expected result:

VoiceOver announces the contents of the Tooltip

Actual result:

The Tooltip is not announced.

Additional information

Please note that the current implementation seems to fit ARIA 1.1 practices:

See here:

The element that serves as the tooltip container has role tooltip.
The element that triggers the tooltip references the tooltip element with aria-describedby.

Still, I tried to get the Tooltip to be announced but couldn't get it to work, neither with VoiceOver, nor with NVDA on Windows.

I noticed that the Tooltip implementation has an element with role="tooltip" and an element with role="dialog" inside it. This is probably the root cause of the issue.

Please also note that I suggested a solution for VoiceOver in PR #5957 but I couldn't get it to work in NVDA. I think NVDA will be able to announce the Tooltip once this PR is sorted out: #5488.

[dakahn]

Just tested this on Safari and it the dialog was read properly on focus. Closing this as resolved -- let me know if there's something I missed.

[FrivalszkyP]

Yes, great! I'm sure #5488 solved this.