From 57e53898de32449269e628a0233c6684cc07adc2 Mon Sep 17 00:00:00 2001
From: Steve Lee <steve@opendirective.com>
Date: Sat, 26 Oct 2019 23:53:13 +0100
Subject: [PATCH 1/2] Add Key handling to modal example

This is a basic accessibility requirement for key access
---
 .../15-composition/04-modal/Modal.svelte      | 25 +++++++++++++++----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/site/content/examples/15-composition/04-modal/Modal.svelte b/site/content/examples/15-composition/04-modal/Modal.svelte
index 5ffa5989a4..8ddaf55921 100644
--- a/site/content/examples/15-composition/04-modal/Modal.svelte
+++ b/site/content/examples/15-composition/04-modal/Modal.svelte
@@ -2,7 +2,23 @@
 	import { createEventDispatcher } from 'svelte';
 
 	const dispatch = createEventDispatcher();
-</script>
+	
+	const handleClose = () => dispatch('close')
+
+	function handleKeydown(event) {
+		if (event.key == 'Escape') {
+			handleClose()
+		} else if (event.key == 'Tab') {
+			event.preventDefault()
+		}
+	}
+
+	let closeButton
+	onMount(() => {
+		closeButton.focus()
+	})
+
+</cript>
 
 <style>
 	.modal-background {
@@ -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>

From 709ae1dce1b0006565f55e5891191e9d1a125997 Mon Sep 17 00:00:00 2001
From: Steve Lee <steve@opendirective.com>
Date: Sun, 27 Oct 2019 18:44:57 +0000
Subject: [PATCH 2/2] Fix script end tag

---
 site/content/examples/15-composition/04-modal/Modal.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/content/examples/15-composition/04-modal/Modal.svelte b/site/content/examples/15-composition/04-modal/Modal.svelte
index 8ddaf55921..44f79c902d 100644
--- a/site/content/examples/15-composition/04-modal/Modal.svelte
+++ b/site/content/examples/15-composition/04-modal/Modal.svelte
@@ -18,7 +18,7 @@
 		closeButton.focus()
 	})
 
-</cript>
+</script>
 
 <style>
 	.modal-background {