From b302783448f62bf0c945b91891a91e11865142b2 Mon Sep 17 00:00:00 2001
From: Clark Kozak <clarkkozak@protonmail.com>
Date: Mon, 12 Apr 2021 12:32:47 -0600
Subject: [PATCH] site: a11y change select on:change to on:blur

- a11y warned on:blur must be used instead of on:change

- the warning distracts the user from the tutorial's objective
---
 site/content/examples/05-bindings/06-select-bindings/App.svelte | 2 +-
 .../tutorial/06-bindings/06-select-bindings/app-a/App.svelte    | 2 +-
 .../tutorial/06-bindings/06-select-bindings/app-b/App.svelte    | 2 +-
 site/content/tutorial/06-bindings/06-select-bindings/text.md    | 2 +-
 test/runtime/samples/select-change-handler/main.svelte          | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/site/content/examples/05-bindings/06-select-bindings/App.svelte b/site/content/examples/05-bindings/06-select-bindings/App.svelte
index 3f1e7fa7e1a8..a5e975fa06a5 100644
--- a/site/content/examples/05-bindings/06-select-bindings/App.svelte
+++ b/site/content/examples/05-bindings/06-select-bindings/App.svelte
@@ -21,7 +21,7 @@
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
-	<select bind:value={selected} on:change="{() => answer = ''}">
+	<select bind:value={selected} on:blur="{() => answer = ''}">
 		{#each questions as question}
 			<option value={question}>
 				{question.text}
diff --git a/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte b/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
index b6f50b935e9d..ad8fe695fed7 100644
--- a/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
+++ b/site/content/tutorial/06-bindings/06-select-bindings/app-a/App.svelte
@@ -21,7 +21,7 @@
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
-	<select value={selected} on:change="{() => answer = ''}">
+	<select value={selected} on:blur="{() => answer = ''}">
 		{#each questions as question}
 			<option value={question}>
 				{question.text}
diff --git a/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte b/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
index 3f1e7fa7e1a8..a5e975fa06a5 100644
--- a/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
+++ b/site/content/tutorial/06-bindings/06-select-bindings/app-b/App.svelte
@@ -21,7 +21,7 @@
 <h2>Insecurity questions</h2>
 
 <form on:submit|preventDefault={handleSubmit}>
-	<select bind:value={selected} on:change="{() => answer = ''}">
+	<select bind:value={selected} on:blur="{() => answer = ''}">
 		{#each questions as question}
 			<option value={question}>
 				{question.text}
diff --git a/site/content/tutorial/06-bindings/06-select-bindings/text.md b/site/content/tutorial/06-bindings/06-select-bindings/text.md
index f4972557ab49..9d8092eed365 100644
--- a/site/content/tutorial/06-bindings/06-select-bindings/text.md
+++ b/site/content/tutorial/06-bindings/06-select-bindings/text.md
@@ -5,7 +5,7 @@ title: Select bindings
 We can also use `bind:value` with `<select>` elements. Update line 24:
 
 ```html
-<select bind:value={selected} on:change="{() => answer = ''}">
+<select bind:value={selected} on:blur="{() => answer = ''}">
 ```
 
 Note that the `<option>` values are objects rather than strings. Svelte doesn't mind.
diff --git a/test/runtime/samples/select-change-handler/main.svelte b/test/runtime/samples/select-change-handler/main.svelte
index 436752176adf..689da32aa0dd 100644
--- a/test/runtime/samples/select-change-handler/main.svelte
+++ b/test/runtime/samples/select-change-handler/main.svelte
@@ -8,7 +8,7 @@
 	}
 </script>
 
-<select bind:value={selected} on:change="{() => updateLastChangedTo(selected)}">
+<select bind:value={selected} on:blur="{() => updateLastChangedTo(selected)}">
 	{#each options as option}
 		<option value="{option.id}">{option.id}</option>
 	{/each}