From 1e55d46bc0c710730069509eaf04a39cacab1ce3 Mon Sep 17 00:00:00 2001
From: Steve Lee <steve@opendirective.com>
Date: Sat, 26 Oct 2019 23:53:13 +0100
Subject: [PATCH] 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>