From aaefa6e8380d27c0864a1f75092c4cc077ed3ac2 Mon Sep 17 00:00:00 2001
From: brunnerh <brunnerh@users.noreply.github.com>
Date: Wed, 22 Feb 2023 07:21:37 +0000
Subject: [PATCH] Fix accessibility of options tutorial. Use button instead of
 non-interactive element (div). (Removes a Svelte a11y warning.)

---
 .../08-svelte-options/app-a/Todo.svelte            | 14 ++++++++------
 .../08-svelte-options/app-b/Todo.svelte            | 14 ++++++++------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte b/site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte
index 57d4dcc79a..cc3856316c 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte
+++ b/site/content/tutorial/16-special-elements/08-svelte-options/app-a/Todo.svelte
@@ -4,22 +4,24 @@
 
 	export let todo;
 
-	let div;
+	let button;
 
 	afterUpdate(() => {
-		flash(div);
+		flash(button);
 	});
 </script>
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<div bind:this={div} on:click>
+<button bind:this={button} type="button" on:click>
 	{todo.done ? '👍': ''} {todo.text}
-</div>
+</button>
 
 <style>
-	div {
+	button {
+		all: unset;
+		display: block;
 		cursor: pointer;
 		line-height: 1.5;
 	}
-</style>
\ No newline at end of file
+</style>
diff --git a/site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte b/site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte
index fa81d35989..848f167d02 100644
--- a/site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte
+++ b/site/content/tutorial/16-special-elements/08-svelte-options/app-b/Todo.svelte
@@ -6,22 +6,24 @@
 
 	export let todo;
 
-	let div;
+	let button;
 
 	afterUpdate(() => {
-		flash(div);
+		flash(button);
 	});
 </script>
 
 <!-- the text will flash red whenever
      the `todo` object changes -->
-<div bind:this={div} on:click>
+<button bind:this={button} type="button" on:click>
 	{todo.done ? '👍': ''} {todo.text}
-</div>
+</button>
 
 <style>
-	div {
+	button {
+		all: unset;
+		display: block;
 		cursor: pointer;
 		line-height: 1.5;
 	}
-</style>
\ No newline at end of file
+</style>