DataViews: action modals without a button do not close when pressing the Esc key

[oandregal]

Description

DataViews supports adding actions that have modals. When a modal is open, it can be closed by pressing the Esc key, but only if the modal has a button that calls the closeModal on click.

Step-by-step reproduction instructions

Modify the DataViews story for render modals:

• Go to the DataViews story, where the render modal action is defined (link to code).
• Change hideModalHeader to modalHeader: 'Delete action'.
• Remove the buttons from the RenderModal component.

Run the storybook:

• npm install && npm run storybook:dev
• It'll automatically open a browser. Go to the DataViews default story at http://localhost:50240/?path=/docs/dataviews-dataviews--docs
• Open the "Delete item" action and verify that it has a header with a close button.
• Press the Esc key in the keyboard. The expected result was that it closed the modal, but it didn't.
• Verify that pressing the X button in the modal header does close the modal.

[oandregal]

cc @WordPress/gutenberg-components for awareness.

[himanshupathak95]

Hey @oandregal, Thanks for raising the issue.

Upon reproduction and investigation, I found out that after removing the button, the modal is not focused. That is the reason pressing Esc key doesn't close the modal.

I observed that if we manually focus the modal after it opens, pressing Esc successfully closes the modal -

Screen.Recording.2025-02-21.at.13.43.39.mov

So, when the modal is mounted to the DOM, we can shift the focus to it, thereby activating all the keypress functionalities.

[himanshupathak95]

Currently, focusOnMount="firstContentElement" doesn't work well when the modal lacks interactive elements. I propose updating the ActionModal component to use a priority-based focus strategy:

• Use "firstElement" when the modal has form inputs (ensuring immediate input focus and respecting the changes made in Align naming modals #62788)
• Fall back to "firstContentElement" for modals with headers but no inputs
• Use true as a final fallback to focus the modal itself

Something like this should work and provide a better focus on different scenarios. After finalizing the approach and outcomes maybe I can take this up. Better approaches are always welcomed :)