feat: add dialog closedby attribute

Author: hyunbinseo

e2e/modal.test.ts

@@ -42,6 +42,8 @@ test('modal functionality', async ({ page }) => {
 
 	await escCheckbox.uncheck();
 	await openButton.click();
+	// Reference https://github.com/sveltejs/svelte/pull/15458
+	await page.keyboard.press('Escape');
 	await page.keyboard.press('Escape');
 	await expect(modal).toHaveAttribute('open');
 	await closeButton.click();

src/lib/Modal.svelte

@@ -40,10 +40,10 @@
 		CSS.supports('transition-behavior', 'allow-discrete');
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 <dialog
 	bind:this={dialog}
+	class:transition={enableTransitions}
+	closedby={!closeOnEscapeKey ? 'none' : null}
 	oncancel={(e) => {
 		if (!closeOnEscapeKey) e.preventDefault();
 		oncancel?.(e);
@@ -82,7 +82,6 @@
 					e.clientY > rect.bottom;
 				if (isBackdropClick) dialog.close();
 			}}
-	class:transition={enableTransitions}
 >
 	{@render children?.()}
 </dialog>