From 8b462fd7da8d6d0c43f5a208f4dfaa0923540769 Mon Sep 17 00:00:00 2001
From: Janosh Riebesell <janosh.riebesell@gmail.com>
Date: Sat, 3 Dec 2022 06:55:51 -0800
Subject: [PATCH] [docs] Fix 3.52.0 a11y warning in svelte-self tutorial
 (#7988)

* fix svelte 3.52 a11y warning

* replace span with button and drop on:keyup
---
 .../16-special-elements/01-svelte-self/app-a/Folder.svelte  | 6 ++++--
 .../16-special-elements/01-svelte-self/app-b/Folder.svelte  | 6 ++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
index e93ffdc548..814e383924 100644
--- a/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-a/Folder.svelte
@@ -10,7 +10,7 @@
 	}
 </script>
 
-<span class:expanded on:click={toggle}>{name}</span>
+<button class:expanded on:click={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
@@ -27,12 +27,14 @@
 {/if}
 
 <style>
-	span {
+	button {
 		padding: 0 0 0 1.5em;
 		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
+		border: none;
+		margin: 0;
 	}
 
 	.expanded {
diff --git a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
index d3fc3a431f..bc9fca21f6 100644
--- a/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
+++ b/site/content/tutorial/16-special-elements/01-svelte-self/app-b/Folder.svelte
@@ -10,7 +10,7 @@
 	}
 </script>
 
-<span class:expanded on:click={toggle}>{name}</span>
+<button class:expanded on:click={toggle}>{name}</button>
 
 {#if expanded}
 	<ul>
@@ -27,12 +27,14 @@
 {/if}
 
 <style>
-	span {
+	button {
 		padding: 0 0 0 1.5em;
 		background: url(/tutorial/icons/folder.svg) 0 0.1em no-repeat;
 		background-size: 1em 1em;
 		font-weight: bold;
 		cursor: pointer;
+		border: none;
+		margin: 0;
 	}
 
 	.expanded {