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 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..24cccf3a7899 100644 --- a/packages/create-svelte/templates/default/src/routes/todos/index.svelte +++ b/packages/create-svelte/templates/default/src/routes/todos/index.svelte @@ -60,7 +60,7 @@ form.reset(); } }}> - + {#each todos as todo (todo.uid)} @@ -78,7 +78,7 @@
@@ -184,7 +184,8 @@ opacity: 0.2; } - .delete:hover { + .delete:hover, + .delete:focus { transition: opacity 0.2s; opacity: 1; } @@ -196,7 +197,8 @@ 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; }