Fix modal escape key propagation

[talldan]

Description

Modal components handle an escape key down as a global event. Unfortunately this means that the modal cannot stop propagation of an event to the outer context. It can only cancel bubbling to an inner context.

With our current implementation of modals, this hasn't really been an issue. On #17265 I'm implementing a modal that's launched from a block toolbar, and pressing esc to close the modal is triggering navigation mode.

This change in this PR is to stop using a global event and instead use an event on the IsolatedEventContainer component. This matches how the Popover component is implemented:

gutenberg/packages/components/src/popover/index.js

Lines 390 to 399 in f198997

	<IsolatedEventContainer
	className={ classnames( classes, animateClassName ) }
	style={ {
	top: ! popoverPosition.isMobile && popoverPosition.popoverTop ? popoverPosition.popoverTop + 'px' : undefined,
	left: ! popoverPosition.isMobile && popoverPosition.popoverLeft ? popoverPosition.popoverLeft + 'px' : undefined,
	visibility: contentSize ? undefined : 'hidden',
	} }
	{ ...contentProps }
	onKeyDown={ maybeClose }
	>

gutenberg/packages/components/src/popover/index.js

Lines 299 to 311 in f198997

	// Event handlers
	const maybeClose = ( event ) => {
	// Close on escape
	if ( event.keyCode === ESCAPE && onClose ) {
	event.stopPropagation();
	onClose();
	}
	// Preserve original content prop behavior
	if ( onKeyDown ) {
	onKeyDown( event );
	}
	};

This PR also moves the IsolatedEventContainer component into ModalFrame. This component is responsible for rendering the overlay behind the modal. Nesting it inside withFocusReturn ensures that when the overlay is clicked, focus is returned to the element that opened the modal.

How has this been tested?

Test that modals:

• Close when pressing escape. Focus should be returned to the element that opened the modal (or as close to the element as possible).
• Close clicking the close button. Focus should be returned to the element that opened the modal (or as close to the element as possible).
• Close when clicking outside. Focus should be returned to the element that opened the modal (or as close to the element as possible).

Screenshots

Types of changes

Bug fix (non-breaking change which fixes an issue)

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[talldan]

Fix typo and describe that it triggers the onRequestClose prop.

[gziolo]

Noting that I have a similar issue in #16964.

[gziolo]

This worked great with the previous commit when I was testing earlier today. Code looks great with all refactorings applied and it solved the issue I had with the PR I linked in my previous comment.

I'll try to retest this PR later today. I had some very minor question which isn't a blocker.

[gziolo]

Re-tested again. I can confirm it all works as advertised. Excellent job @talldan 🎉