Explore a <DisabledWrapper> component

[Pjaerr]

If your tooltipper is a disabled element, the tooltip will not show for keyboard users (as you can't focus a disabled element), or in a test suite with simulated mouseenter events for the same reason.

This PR explores the addition of a <DisabledWrapper> component that provides a wrapper acting as a fake element that is focusable. In this scenario the wrapper is the tooltipper, not the disabled element. When the element is not disabled, then the wrapper just acts as an empty div.

Note that I've had to adjust the focus events to check for focusin and focusout as if a button is not disabled, but is wrapped with <DisabledWrapper>, we don't want to force the user to have to tab twice to get to the button, this change means the wrapper will remain the tooltipper, just not focusable, instead reacting to the bubbling focus event from the button. I'm not too sure on whether this is the right approach, or if there are any knock on effects 🤔

Note that there are no tests for this functionality yet. This is just exploring it.

[Pjaerr]

@amk221 No rush, but I just had a quick play with what a wrapper element could look like to solve this problem. What do you think to this approach?

I think the name of the component could be better but I guess it's purpose is very descriptive as <DisabledWrapper>. I've also made it take a @disabled arg, instead of automatically figuring out if the direct child is disabled.