About Accessible Modal Dialogs

<button id="openDialog">Open Form Dialog</button>

<dialog id="formDialog">
    <form method="dialog">
        <h2>Subscribe to our Newsletter</h2>
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </div>
        <div>
            <button type="button" id="cancelButton">Cancel</button>
            <button type="submit">Subscribe</button>
        </div>
    </form>
</dialog>

<script>
    const openButton = document.getElementById('openDialog');
    const dialog = document.getElementById('formDialog');
    const cancelButton = document.getElementById('cancelButton');

    // Open dialog
    openButton.addEventListener('click', () => {
        dialog.showModal();
    });

    // Close dialog on cancel
    cancelButton.addEventListener('click', () => {
        dialog.close();
    });

    // Handle form submission
    dialog.addEventListener('close', () => {
        if (dialog.returnValue !== '') {
            const formData = new FormData(dialog.querySelector('form'));
            console.log('Form submitted with:', Object.fromEntries(formData));
        }
    });
</script>