DropdownMenuV2: prevent default on Escape key presses

[ciampo]

What?

This PR changes the default behaviour of the new experimental DropdownMenu component so that the keyboard event related to pressing the Escape key is default prevented.

Why?

As pointed out in #55625 (comment), pressing the Escape key to close the dropdown menu can have unintended consequences (like, for example, causing a browser on MacOs to exit full screen mode).

How?

Instead of using a boolean for the hideOnEscape prop, we can use a callback function that accepts the event object. We can then call preventDefault() on it.

Also, note that this PR only changes the default behaviour of the component. Folks wishing to have the keyboard event bubbling up can simply pass a different value for the prop.

Testing Instructions

1. Make sure that, when pressing the Escape key, the dropdown menu still closes correctly
2. Make sure that pressing the event associated to the Escape key pressed when closing the dropdown menu is default prevented:
   • With changes from this PR downloaded on a local machine, run npm run storybook:dev
   • Visit the dropdown menu v2 storybook example, and open the example in a new window (ie. likely this URL)
   • Open the browser dev tools, and in the console type document.addEventListener('keydown', (e) => console.log(e.key, e.defaultPrevented))
   • Interact with the dropdown menu. When pressing the Escape key with an open menu, the console output should be Escape true. When pressing the escape key when the menu is closed, the console output should be Escape false.
3. As an optional test, load the Menu's storybook example on MacOS safari and make the Safari window full screen. Pressing the Escape key while the menu is open should not cause Safari to exit full screen.

[youknowriad]

IMO, since we're just passing down this prop and it's ariakit that is handling the ESCAPE key, I think the ideal fix would have to be done in ariakit directly

[youknowriad]

I'm fine with a fix here for now, but maybe this could benefit more users.

[ciampo]

@diegohaz maybe you can share some perspective as to why this is not the case in ariakit?

[diegohaz]

I can't remember any discussion about hideOnEscape and fullscreen mode in particular, so there's likely no specific reason. It seems it just hasn't been considered yet.

But there's an issue with fullscreen and portal: ariakit/ariakit#865

[youknowriad]

Is there any particular reason to stop propagation?

[ciampo]

Without it, I thought that, when a DropdownMenu is rendered inside a Modal, pressing Escape would close the DropdownMenu and the parent modal.

That was my impression because, when talking to Diego, I seem to remember him suggesting this change specifically for when a DropdownMenu is rendered inside a Modal.

But I just tested without it, and things seem to work well.

[github-actions]

Flaky tests detected in 897f3fc.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6813741126
📝 Reported issues:

• [Flaky Test] should partially select with shift + click (@webkit) #53524 in /test/e2e/specs/editor/various/multi-block-selection.spec.js