Merge branch 'patch-1' of https://github.com/SteveALee/svelte into SteveALee-patch-1

site/content/examples/15-composition/04-modal/Modal.svelte

@@ -2,6 +2,22 @@
 	import { createEventDispatcher } from 'svelte';
 
 	const dispatch = createEventDispatcher();
+	
+	const handleClose = () => dispatch('close')
+
+	function handleKeydown(event) {
+		if (event.key == 'Escape') {
+			handleClose()
+		} else if (event.key == 'Tab') {
+			event.preventDefault()
+		}
+	}
+
+	let closeButton
+	onMount(() => {
+		closeButton.focus()
+	})
+
 </script>
 
 <style>
@@ -16,8 +32,7 @@
 
 	.modal {
 		position: absolute;
-		left: 50%;
-		top: 50%;
+		left: 50%;	top: 50%;
 		width: calc(100vw - 4em);
 		max-width: 32em;
 		max-height: calc(100vh - 4em);
@@ -33,7 +48,7 @@
 	}
 </style>
 
-<div class='modal-background' on:click='{() => dispatch("close")}'></div>
+<div class='modal-background' on:click='{handleClose}'></div>
 
 <div class='modal'>
 	<slot name='header'></slot>
@@ -41,5 +56,5 @@
 	<slot></slot>
 	<hr>
 
-	<button on:click='{() => dispatch("close")}'>close modal</button>
+	<button on:click='{() => dispatch("close")}' bind:this={closeButton}>close modal</button>
 </div>