useFocusOutside: do not fire callback when focusing on an iframe inside the wrapper

[ciampo]

What?

Requires #45317
Related to #40912

Try to fix an issue with useFocusOutside, where the callback would be fired when interacting with an iframe (and its contents) inside the wrapper element.

Why?

The problem is related to how the hook works and how those principles don't function well with an iframe: the hook, in fact, cancels the timeout that would cause the callback to fire if a focus event if fired rapidly after a blur event (both events need to happed inside the wrapper element).

The iframe element doesn't seem to fire on focus and blur events, therefore breaking the useFocusOutside logic.

How?

So far, I managed to make some progress by:

• adding a tabindex={-1} to the iframe element, which allows it to be consistently identified as the active element
• preventing the callback to fire if the wrapper contains the active element (this is a way to get around the fact that the iframe doesn't fire focus events)

The issue I'm still facing is that, since the iframe doesn't fire the blur event, the callback doesn't fire as reliably as it should — this can be tested in the extra Storybook example for Modal that I've added in this PR:

1. Open Modal
2. Click inside the iframe
3. Click outside the modal
4. The modal won't close, even if it should

Testing Instructions

TBD

(It would be great to add extra unit tests too, so far I've attempted to write one but it's not final yet)

Screenshots or screencast

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[ciampo]

Closing in favour of #52040