diff --git a/site/content/examples/15-composition/05-modal/App.svelte b/site/content/examples/15-composition/05-modal/App.svelte
index f8b99107dc..af93ba39af 100644
--- a/site/content/examples/15-composition/05-modal/App.svelte
+++ b/site/content/examples/15-composition/05-modal/App.svelte
@@ -1,21 +1,14 @@
 <script>
 	import Modal from './Modal.svelte';
 
-	let button; // HTMLButtonElement
 	let showModal = false;
 </script>
 
-<button bind:this={button} on:click={() => (showModal = true)}>
+<button on:click={() => (showModal = true)}>
 	show modal
 </button>
 
-<Modal
-	{showModal}
-	on:close={() => {
-		showModal = false;
-		button.focus();
-	}}
->
+<Modal bind:showModal>
 	<h2 slot="header">
 		modal
 		<small><em>adjective</em> mod·al \ˈmō-dəl\</small>
diff --git a/site/content/examples/15-composition/05-modal/Modal.svelte b/site/content/examples/15-composition/05-modal/Modal.svelte
index b35e83d7f7..acdbd50ab1 100644
--- a/site/content/examples/15-composition/05-modal/Modal.svelte
+++ b/site/content/examples/15-composition/05-modal/Modal.svelte
@@ -7,7 +7,11 @@
 </script>
 
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<dialog bind:this={dialog} on:close on:click|self={() => dialog.close()}>
+<dialog
+	bind:this={dialog}
+	on:close={() => (showModal = false)}
+	on:click|self={() => dialog.close()}
+>
 	<div on:click|stopPropagation>
 		<slot name="header" />
 		<hr />