[BUG] Accessibility: tooltip should remain open as long as the cursor is over the trigger *or the tooltip.*

[moloko]

Bug description
WCAG 2.2 Success Criterion 1.4.13 Content on Hover or Focus states that

If pointer hover can trigger the additional content, then the pointer can be moved over the additional content without the additional content disappearing.

As far as I can see there's no way to make react-tooltip adhere to this requirement. I've tried adding a slight delay to hide using data-tooltip-delay-hide just in case it needed some time for the pointer to move from trigger to tooltip - but that didn't work.

Version of Package
v5.30.0

To Reproduce
Add a react-tooltip to a button or link. Trigger the tooltip by mousing over the element. Attempt to move the mouse cursor into the tooltip itself.

Expected behavior
The tooltip should remain open whilst the mouse cursor is over the tooltip itself.

Additional context
https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html
https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/

[campreb]

@moloko have you tried setting the clickable prop?
Even if you just set it with text as the tooltip content, it seems to allow moving the mouse over the tooltip, and remains open while over the tooltip.

[moloko]

have you tried setting the clickable prop?

@campreb that works, thanks!

Maybe a documentation update to make that clear as it is not very obvious that prop would have any impact...

[danielbarion]

have you tried setting the clickable prop?

@campreb that works, thanks!

Maybe a documentation update to make that clear as it is not very obvious that prop would have any impact...

Can you please create a PR with the changes you believe will help in the future on that question?

[danielbarion]

Closed by #1267

[moloko]

@danielbarion OK that's done.

I think ideally there'd be a separate section in the docs (around same level as Troubleshooting) called 'Accessibility' that calls out that, in order to adhere to the three WCAG success criteria related to tooltips, you'd need to:

• use the clickable prop to ensure the tooltip content can be hovered over
• allow the tooltip to be dismissed via the Esc key via globalCloseEvents
• ensure the tooltip anchor is keyboard-accessible
• ensure the tooltip anchor has an aria-describedby attribute that contains the id of the <Tooltip>

And ideally has an example showing all those in action.

But I wasn't sure how to go about adding a section... is it just a case of adding a file called accessibility.mdx to docs/docs? If so, I'm happy to have a go at doing this... LMK!

[danielbarion]

@moloko, thanks for creating the documentation.

Yes, all you need to do is create the file, and it should be automatically mapped by the router.

If you can, please create the accessibility section in the docs, I'll review as soon as possible.

(you can keep or remove the previous PR that was merged since we will have a dedicated section for accessibility)

[moloko]

If you can, please create the accessibility section in the docs, I'll review as soon as possible.

All done - see #1284. Sorry it took me so long!