Detailed answer
Use showModal on the dialog element rather than merely setting open.
Give the dialog a meaningful name and a clear way to close it. Native behavior helps with modal focus handling, but you still need to test entering, using, and leaving the dialog. Put the workflow ahead of the overlay's appearance.
Example
<dialog id="help" aria-labelledby="help-title"><h2 id="help-title">HTML help</h2><form method="dialog"><button>Close</button></form></dialog>
<script>document.querySelector("#help").showModal();</script>
Understanding the behavior
ShowModal opens a dialog in the modal top layer and makes the rest of the document inert while it is open. Calling show instead creates a non-modal dialog. A dialog needs an understandable name, sensible initial focus and an obvious way to close it.
Practical implementation notes
Open and close it using the keyboard, including Escape where appropriate. Confirm focus returns to a sensible place and that long dialog content remains reachable on a small screen.
How to check it
Open a real dialog with showModal, test closing it, and verify focus returns sensibly.
Expected result
Modal interaction is contained and users have a working exit.
Watch out: Do not build a decorative modal that keyboard users cannot close.
Read the reference ↗