tooltip
tooltip copied to clipboard
react-component
Tooltip with interactive content not keyboard accessible
I am using rc-tooltip to show some tooltip in our app. In once instance we have a tooltip that contains some links which the user can click to navigate to another page. The problem is the keyboard navigation, because there is no way to the user to be able to access those clickable links in the tooltip using keyboard only. Is there any work around for this problem or do you think you can enhance the tooltip to make it keyboard accessible?
Sorry, we have no time to improve keyboard accessibility. But you can PR to us, thanks.
I think the problem is that rc-trigger appends its <div> to the end of <body> instead of rendering it next to the children of <Tooltip>. I'm not sure why it does that and after trying to read the code I don't even know how it does that tbh.
To put it another way: if you want to use the tab key to navigate through the content of the tooltip, you have to tab through the entire page first.
I think I may have solved it (for my case anyway). I attached the tooltip panel to the container div. This allows one to tab through a tooltip menu naturally -- in my case it's a menu using buttons.
render() {
return (
<div ref={(ref) => { this.container = ref; }}>
<Tooltip getTooltipContainer={() => this.container} ... />
</div>
);
}