Modal Dialog III

Make the accessible modal dismissable the way users expect: not just the close button, but also clicking the backdrop and pressing Escape. Two new dismissal paths, each with a subtlety — the backdrop must only close when it is clicked (not when a click bubbles up from inside the dialog), and the Escape listener must be added while open and cleaned up when closed.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

The dialog closes via the × / Cancel buttons, a click on the backdrop, or the Escape key.

Examples

click × / Cancel         → closes (as before)
click the dark backdrop  → closes
click inside the dialog  → stays open  (the click is on the dialog, not backdrop)
press Escape             → closes

Backdrop check:  close only if  e.target === e.currentTarget
Escape:          add keydown listener while open; remove it on cleanup

Notes

• Backdrop click needs a target check. A click inside the dialog bubbles to the backdrop's handler, so closing on every backdrop event would dismiss when the user clicks the content. Close only when e.target === e.currentTarget (the backdrop itself).
• Escape is a document-level key. Listen for keydown on document while the dialog is open and call close on 'Escape'.
• Clean up the listener. Add it in an effect that depends on open, and remove it on cleanup — otherwise it lingers after close (or stacks across opens).
• Out of scope. Focus trapping and restoration — Modal Dialog IV. Here it's the dismissal paths.