Focus Outline Appears on Modal Close Button After Pressing Esc Key

[zubairzahid94]

Description:

• I have searched the Issues to see if this UI control has already been reported
• I have tested the latest version

Steps to reproduce:

1. Go to a Modal component with the dismissible prop set to true.
2. Open the modal, then press the Esc key to close the modal.
3. Reopen the modal and observe the close (cross) button.

Current behavior:
After reopening the modal by pressing the Esc key, the close (cross) button displays a visible focus outline. This behavior appears to be a default focus style, which can be distracting in some UI designs.

Expected behavior:
The close (cross) button should not retain focus or show any outline after reopening the modal via the Esc key. The button should only display a focus outline when clicked or navigated to via keyboard controls, to provide a smoother user experience.

Context:
This UI issue is mostly about improving user experience and visual design. It happens across multiple browsers, screen sizes, and is consistent with modals that use the dismissible prop.

Solution:
I resolved this issue by applying a custom class to the entire modal and using custom CSS to remove the focus outline on the close button. Specifically, I added the class focus:outline-none to the modal, which effectively prevents the focus outline from appearing when the modal is reopened after pressing the Esc key. This provides a cleaner and more visually appealing interface.
If needed, I can provide a code sandbox or minimal reproduction for better clarity.