From dde8a75ce3d67529dc65225ab16cef356c83f362 Mon Sep 17 00:00:00 2001
From: Geoff Rich <geoff.rich@alaskaair.com>
Date: Sat, 24 Apr 2021 12:43:52 -0700
Subject: [PATCH 1/6] A11y improvements to todo list demo

---
 .../default/src/routes/todos/index.svelte     | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/packages/create-svelte/templates/default/src/routes/todos/index.svelte b/packages/create-svelte/templates/default/src/routes/todos/index.svelte
index c460af0c8402..7294ed957345 100644
--- a/packages/create-svelte/templates/default/src/routes/todos/index.svelte
+++ b/packages/create-svelte/templates/default/src/routes/todos/index.svelte
@@ -43,6 +43,8 @@
 			return t;
 		});
 	}
+
+	let heading;
 </script>
 
 <svelte:head>
@@ -50,7 +52,7 @@
 </svelte:head>
 
 <div class="todos">
-	<h1>Todos</h1>
+	<h1 tabindex="-1" bind:this={heading}>Todos</h1>
 
 	<form class="new" action="/todos.json" method="post" use:enhance={{
 		result: async (res, form) => {
@@ -60,7 +62,7 @@
 			form.reset();
 		}
 	}}>
-		<input name="text" placeholder="+ tap to add a todo">
+		<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo">
 	</form>
 
 	{#each todos as todo (todo.uid)}
@@ -78,13 +80,14 @@
 			<form class="text" action="/todos/{todo.uid}.json?_method=patch" method="post" use:enhance={{
 				result: patch
 			}}>
-				<input type="text" name="text" value={todo.text}>
+				<input aria-label="Edit todo" type="text" name="text" value={todo.text}>
 				<button class="save" aria-label="Save todo"/>
 			</form>
 
 			<form action="/todos/{todo.uid}.json?_method=delete" method="post" use:enhance={{
 				result: () => {
 					todos = todos.filter(t => t.uid !== todo.uid);
+					heading.focus();
 				}
 			}}>
 				<button class="delete" aria-label="Delete todo"/>
@@ -184,7 +187,8 @@
 		opacity: 0.2;
 	}
 
-	.delete:hover {
+	.delete:hover,
+	.delete:focus {
 		transition: opacity 0.2s;
 		opacity: 1;
 	}
@@ -196,8 +200,13 @@
 		background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
 	}
 
-	.todo input:focus + .save {
+	.todo input:focus + .save,
+	.save:focus {
 		transition: opacity 0.2s;
 		opacity: 1;
 	}
+
+	[tabindex="-1"] {
+		outline: none;
+	}
 </style>

From d1d06f5c397a67ba76bba12114bb2d1c8229371c Mon Sep 17 00:00:00 2001
From: Geoff Rich <geoff.rich@alaskaair.com>
Date: Sat, 24 Apr 2021 12:45:01 -0700
Subject: [PATCH 2/6] Add changeset

---
 .changeset/lovely-apricots-fail.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/lovely-apricots-fail.md

diff --git a/.changeset/lovely-apricots-fail.md b/.changeset/lovely-apricots-fail.md
new file mode 100644
index 000000000000..3f761acf92ea
--- /dev/null
+++ b/.changeset/lovely-apricots-fail.md
@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Improve a11y on to-do list in template

From 920326c5ca5319e198d950507a3569539dc84d1a Mon Sep 17 00:00:00 2001
From: Geoff Rich <geoff.rich@alaskaair.com>
Date: Mon, 26 Apr 2021 08:50:49 -0700
Subject: [PATCH 3/6] Focus appropriate input instead of heading

---
 .../default/src/routes/todos/index.svelte     | 33 ++++++++++++-------
 1 file changed, 22 insertions(+), 11 deletions(-)

diff --git a/packages/create-svelte/templates/default/src/routes/todos/index.svelte b/packages/create-svelte/templates/default/src/routes/todos/index.svelte
index 7294ed957345..9dc4a9f8921e 100644
--- a/packages/create-svelte/templates/default/src/routes/todos/index.svelte
+++ b/packages/create-svelte/templates/default/src/routes/todos/index.svelte
@@ -1,4 +1,5 @@
 <script context="module" lang="ts">
+	import { tick } from 'svelte';
 	import { enhance } from '$lib/form';
 	import type { Load } from '@sveltejs/kit';
 
@@ -44,7 +45,21 @@
 		});
 	}
 
-	let heading;
+	let addInput;
+	let todoInputs = [];
+	async function manageFocus(i) {
+		await tick();
+		console.log(todoInputs);
+		const nextInput = todoInputs[i + 1];
+		const previousInput = todoInputs[i - 1];
+		if (nextInput) {
+			nextInput.focus();
+		} else if (previousInput) {
+			previousInput.focus();
+		} else {
+			addInput.focus();
+		}
+	}
 </script>
 
 <svelte:head>
@@ -52,7 +67,7 @@
 </svelte:head>
 
 <div class="todos">
-	<h1 tabindex="-1" bind:this={heading}>Todos</h1>
+	<h1>Todos</h1>
 
 	<form class="new" action="/todos.json" method="post" use:enhance={{
 		result: async (res, form) => {
@@ -62,10 +77,10 @@
 			form.reset();
 		}
 	}}>
-		<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo">
+		<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo" bind:this={addInput}>
 	</form>
 
-	{#each todos as todo (todo.uid)}
+	{#each todos as todo, i (todo.uid)}
 		<div class="todo" class:done={todo.done} transition:scale|local={{start:0.7}} animate:flip={{duration:200}}>
 			<form action="/todos/{todo.uid}.json?_method=patch" method="post" use:enhance={{
 				pending: (data) => {
@@ -80,14 +95,14 @@
 			<form class="text" action="/todos/{todo.uid}.json?_method=patch" method="post" use:enhance={{
 				result: patch
 			}}>
-				<input aria-label="Edit todo" type="text" name="text" value={todo.text}>
+				<input aria-label="Edit todo" type="text" name="text" value={todo.text} bind:this={todoInputs[i]}>
 				<button class="save" aria-label="Save todo"/>
 			</form>
 
 			<form action="/todos/{todo.uid}.json?_method=delete" method="post" use:enhance={{
-				result: () => {
+				result: async () => {
+					await manageFocus(i);
 					todos = todos.filter(t => t.uid !== todo.uid);
-					heading.focus();
 				}
 			}}>
 				<button class="delete" aria-label="Delete todo"/>
@@ -205,8 +220,4 @@
 		transition: opacity 0.2s;
 		opacity: 1;
 	}
-
-	[tabindex="-1"] {
-		outline: none;
-	}
 </style>

From 38c7cfc826840bcab041f139b97a503496833333 Mon Sep 17 00:00:00 2001
From: Geoff Rich <geoff.rich@alaskaair.com>
Date: Mon, 26 Apr 2021 08:58:49 -0700
Subject: [PATCH 4/6] Remove console log

---
 .../templates/default/src/routes/todos/index.svelte              | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/create-svelte/templates/default/src/routes/todos/index.svelte b/packages/create-svelte/templates/default/src/routes/todos/index.svelte
index 9dc4a9f8921e..2b01824c3727 100644
--- a/packages/create-svelte/templates/default/src/routes/todos/index.svelte
+++ b/packages/create-svelte/templates/default/src/routes/todos/index.svelte
@@ -49,7 +49,6 @@
 	let todoInputs = [];
 	async function manageFocus(i) {
 		await tick();
-		console.log(todoInputs);
 		const nextInput = todoInputs[i + 1];
 		const previousInput = todoInputs[i - 1];
 		if (nextInput) {

From 89972039bef6cf259bc0c2770a7a2525e0d920e5 Mon Sep 17 00:00:00 2001
From: Geoff Rich <geoff.rich@alaskaair.com>
Date: Wed, 28 Apr 2021 07:40:02 -0700
Subject: [PATCH 5/6] Remove focus management

---
 .../default/src/routes/todos/index.svelte     | 21 ++-----------------
 1 file changed, 2 insertions(+), 19 deletions(-)

diff --git a/packages/create-svelte/templates/default/src/routes/todos/index.svelte b/packages/create-svelte/templates/default/src/routes/todos/index.svelte
index 2b01824c3727..64620fbedc52 100644
--- a/packages/create-svelte/templates/default/src/routes/todos/index.svelte
+++ b/packages/create-svelte/templates/default/src/routes/todos/index.svelte
@@ -1,5 +1,4 @@
 <script context="module" lang="ts">
-	import { tick } from 'svelte';
 	import { enhance } from '$lib/form';
 	import type { Load } from '@sveltejs/kit';
 
@@ -44,21 +43,6 @@
 			return t;
 		});
 	}
-
-	let addInput;
-	let todoInputs = [];
-	async function manageFocus(i) {
-		await tick();
-		const nextInput = todoInputs[i + 1];
-		const previousInput = todoInputs[i - 1];
-		if (nextInput) {
-			nextInput.focus();
-		} else if (previousInput) {
-			previousInput.focus();
-		} else {
-			addInput.focus();
-		}
-	}
 </script>
 
 <svelte:head>
@@ -76,7 +60,7 @@
 			form.reset();
 		}
 	}}>
-		<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo" bind:this={addInput}>
+		<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo">
 	</form>
 
 	{#each todos as todo, i (todo.uid)}
@@ -94,13 +78,12 @@
 			<form class="text" action="/todos/{todo.uid}.json?_method=patch" method="post" use:enhance={{
 				result: patch
 			}}>
-				<input aria-label="Edit todo" type="text" name="text" value={todo.text} bind:this={todoInputs[i]}>
+				<input aria-label="Edit todo" type="text" name="text" value={todo.text}>
 				<button class="save" aria-label="Save todo"/>
 			</form>
 
 			<form action="/todos/{todo.uid}.json?_method=delete" method="post" use:enhance={{
 				result: async () => {
-					await manageFocus(i);
 					todos = todos.filter(t => t.uid !== todo.uid);
 				}
 			}}>

From 5417f982fde6a71a0ae12a0a8e2e415c6be385a2 Mon Sep 17 00:00:00 2001
From: Geoff Rich <geoff.rich@alaskaair.com>
Date: Wed, 28 Apr 2021 07:42:05 -0700
Subject: [PATCH 6/6] More cleanup

---
 .../templates/default/src/routes/todos/index.svelte           | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/create-svelte/templates/default/src/routes/todos/index.svelte b/packages/create-svelte/templates/default/src/routes/todos/index.svelte
index 64620fbedc52..24cccf3a7899 100644
--- a/packages/create-svelte/templates/default/src/routes/todos/index.svelte
+++ b/packages/create-svelte/templates/default/src/routes/todos/index.svelte
@@ -63,7 +63,7 @@
 		<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo">
 	</form>
 
-	{#each todos as todo, i (todo.uid)}
+	{#each todos as todo (todo.uid)}
 		<div class="todo" class:done={todo.done} transition:scale|local={{start:0.7}} animate:flip={{duration:200}}>
 			<form action="/todos/{todo.uid}.json?_method=patch" method="post" use:enhance={{
 				pending: (data) => {
@@ -83,7 +83,7 @@
 			</form>
 
 			<form action="/todos/{todo.uid}.json?_method=delete" method="post" use:enhance={{
-				result: async () => {
+				result: () => {
 					todos = todos.filter(t => t.uid !== todo.uid);
 				}
 			}}>