Trap focus in modal dialogs

focus-trap is de facto standard for trapping focus in modal dialogs. It may be added to ModalDialog with the following snippet:

useEffect(() => {
    if (modalDialog.current == null) {
        return () => {};
    }

    const trap = focusTrap.createFocusTrap(modalDialog.current, {
        allowOutsideClick: shadowClick,
        escapeDeactivates: onClose != null,
        preventScroll: false, // handled by useOverlay()
    });
    trap.activate();

    return () => trap.deactivate();
}, [onClose, shadowClick]);

But after that Tab navigation in some dialogs breaks and needs to be fixed in every dialog one-by-one.

Possibly, the modern approach would be to migrate to <dialog> and showModal().

Start at the ModalDialog component and inspect how useOverlay() currently handles scrolling and focus. Evaluate the proposed focus-trap integration against each dialog, including the reported Tab-navigation failures, and compare it with the possible

and showModal() approach. Done means keyboard focus is correctly trapped and Tab navigation works in every dialog.