Improve Keyboard Accessibility

[Neurrone]

problem

1. By default, the tooltip's contents is rendered at the bottom of the DOM, so that it is not practical to use the keyboard to access the contents of the tooltip (e.g, to activate navigation links on a menu). This also makes it difficult for screen reader users to read the contents of the tooltip once it is visible, because it is not next to the triggering element.
2. There is an option to display the tooltip when the element gains focus. However, this does not work at all in practice because when keyboard focus moves to an element inside the displayed tooltip, the tooltip closes.

Proposed solution

We're using this library at work, and have implemented the following workaround. If there's interest, I'll be happy to submit an MR.

1. Instead of by default rendering the tooltip contents by appending to the end of the DOM, render it next to the triggering element. We worked around this by providing a node next to the triggering element with getTooltipContainer.

2. Listen for blur events, and only hide the tooltip if the related target is not a child of the component's render tree (i.e, if focus is being moved outside the tooltip). Working around this from outside the library was more complex, because we had to set the visible prop explicitly, ensuring that it would react correctly to both keyboard focus and mouse hover events.