From bbcb5f58ae99e1851469388dbfb6a1c3c8d91c37 Mon Sep 17 00:00:00 2001
From: Alimurtuza <88965204+CYBWEBALI@users.noreply.github.com>
Date: Mon, 26 Jun 2023 14:14:29 +0530
Subject: [PATCH] docs: handle warnings in examples page (#8836)

ignore some, fix others

---------

Co-authored-by: Simon H <5968653+dummdidumm@users.noreply.github.com>
---
 .../examples/04-events/00-dom-events/App.svelte    |  1 +
 .../04-events/01-inline-handlers/App.svelte        |  1 +
 .../examples/08-motion/01-spring/App.svelte        |  1 +
 .../06-deferred-transitions/App.svelte             |  1 +
 .../examples/11-easing/00-easing/Controls.svelte   |  8 ++++----
 .../15-composition/03-slot-props/Hoverable.svelte  |  1 +
 .../examples/15-composition/05-modal/Modal.svelte  |  3 ++-
 .../00-svelte-self/Folder.svelte                   |  6 ++++--
 .../examples/20-7guis/06-7guis-circles/App.svelte  |  3 ++-
 .../21-miscellaneous/02-immutable-data/App.svelte  |  4 ++--
 .../02-immutable-data/ImmutableTodo.svelte         | 14 ++++++++------
 .../02-immutable-data/MutableTodo.svelte           | 14 ++++++++------
 12 files changed, 35 insertions(+), 22 deletions(-)

diff --git a/documentation/examples/04-events/00-dom-events/App.svelte b/documentation/examples/04-events/00-dom-events/App.svelte
index 54470a9a5e..2f6eac115c 100644
--- a/documentation/examples/04-events/00-dom-events/App.svelte
+++ b/documentation/examples/04-events/00-dom-events/App.svelte
@@ -7,6 +7,7 @@
 	}
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:mousemove={handleMousemove}>
 	The mouse position is {m.x} x {m.y}
 </div>
diff --git a/documentation/examples/04-events/01-inline-handlers/App.svelte b/documentation/examples/04-events/01-inline-handlers/App.svelte
index 24127035ad..4827241f30 100644
--- a/documentation/examples/04-events/01-inline-handlers/App.svelte
+++ b/documentation/examples/04-events/01-inline-handlers/App.svelte
@@ -2,6 +2,7 @@
 	let m = { x: 0, y: 0 };
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:mousemove={(e) => (m = { x: e.clientX, y: e.clientY })}>
 	The mouse position is {m.x} x {m.y}
 </div>
diff --git a/documentation/examples/08-motion/01-spring/App.svelte b/documentation/examples/08-motion/01-spring/App.svelte
index 59346dcb3b..e5b59901aa 100644
--- a/documentation/examples/08-motion/01-spring/App.svelte
+++ b/documentation/examples/08-motion/01-spring/App.svelte
@@ -24,6 +24,7 @@
 	</label>
 </div>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <svg
 	on:mousemove={(e) => coords.set({ x: e.clientX, y: e.clientY })}
 	on:mousedown={() => size.set(30)}
diff --git a/documentation/examples/09-transitions/06-deferred-transitions/App.svelte b/documentation/examples/09-transitions/06-deferred-transitions/App.svelte
index c88ba67d25..74db062fc8 100644
--- a/documentation/examples/09-transitions/06-deferred-transitions/App.svelte
+++ b/documentation/examples/09-transitions/06-deferred-transitions/App.svelte
@@ -49,6 +49,7 @@
 		{#if selected}
 			{#await selected then d}
 				<div class="photo" in:receive={{ key: d.id }} out:send={{ key: d.id }}>
+					<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
 					<img alt={d.alt} src="{ASSETS}/{d.id}.jpg" on:click={() => (selected = null)} />
 
 					<p class="credit">
diff --git a/documentation/examples/11-easing/00-easing/Controls.svelte b/documentation/examples/11-easing/00-easing/Controls.svelte
index 5b51b8b84b..127389b4bc 100644
--- a/documentation/examples/11-easing/00-easing/Controls.svelte
+++ b/documentation/examples/11-easing/00-easing/Controls.svelte
@@ -28,8 +28,8 @@
 		{:else}
 			<ul>
 				{#each [...eases] as [name]}
-					<li class:selected={name === current_ease} on:click={() => (current_ease = name)}>
-						{name}
+					<li class:selected={name === current_ease}>
+						<button on:click={() => (current_ease = name)}> {name}</button>
 					</li>
 				{/each}
 			</ul>
@@ -46,8 +46,8 @@
 		{:else}
 			<ul>
 				{#each types as [name, type]}
-					<li class:selected={type === current_type} on:click={() => (current_type = type)}>
-						{name}
+					<li class:selected={type === current_type}>
+						<button on:click={() => (current_type = type)}> {name}</button>
 					</li>
 				{/each}
 			</ul>
diff --git a/documentation/examples/15-composition/03-slot-props/Hoverable.svelte b/documentation/examples/15-composition/03-slot-props/Hoverable.svelte
index 773a8ecf6a..fbf45e4d30 100644
--- a/documentation/examples/15-composition/03-slot-props/Hoverable.svelte
+++ b/documentation/examples/15-composition/03-slot-props/Hoverable.svelte
@@ -10,6 +10,7 @@
 	}
 </script>
 
+<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div on:mouseenter={enter} on:mouseleave={leave}>
 	<slot {hovering} />
 </div>
diff --git a/documentation/examples/15-composition/05-modal/Modal.svelte b/documentation/examples/15-composition/05-modal/Modal.svelte
index acdbd50ab1..3b832030fe 100644
--- a/documentation/examples/15-composition/05-modal/Modal.svelte
+++ b/documentation/examples/15-composition/05-modal/Modal.svelte
@@ -6,12 +6,13 @@
 	$: if (dialog && showModal) dialog.showModal();
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
 <dialog
 	bind:this={dialog}
 	on:close={() => (showModal = false)}
 	on:click|self={() => dialog.close()}
 >
+	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div on:click|stopPropagation>
 		<slot name="header" />
 		<hr />
diff --git a/documentation/examples/17-special-elements/00-svelte-self/Folder.svelte b/documentation/examples/17-special-elements/00-svelte-self/Folder.svelte
index 8350aacf49..543a7140d3 100644
--- a/documentation/examples/17-special-elements/00-svelte-self/Folder.svelte
+++ b/documentation/examples/17-special-elements/00-svelte-self/Folder.svelte
@@ -11,7 +11,7 @@
 	}
 </script>
 
-<span class:expanded on:click={toggle}>{name}</span>
+<button class:expanded on:click={toggle}>{name}</button>
 
 {#if expanded}
 	<ul transition:slide={{ duration: 300 }}>
@@ -28,12 +28,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;
+		font-size:14px;
 	}
 
 	.expanded {
diff --git a/documentation/examples/20-7guis/06-7guis-circles/App.svelte b/documentation/examples/20-7guis/06-7guis-circles/App.svelte
index 7ce1e76bda..12d79a1a05 100644
--- a/documentation/examples/20-7guis/06-7guis-circles/App.svelte
+++ b/documentation/examples/20-7guis/06-7guis-circles/App.svelte
@@ -69,9 +69,10 @@ radius of the selected circle.
 	<button on:click={() => travel(-1)} disabled={i === 0}>undo</button>
 	<button on:click={() => travel(+1)} disabled={i === undoStack.length - 1}>redo</button>
 </div>
-
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
 <svg on:click={handleClick}>
 	{#each circles as circle}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<circle
 			cx={circle.cx}
 			cy={circle.cy}
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte
index 6e9373a14d..05d0820f9e 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte
@@ -27,10 +27,10 @@
 
 <h2>Immutable</h2>
 {#each todos as todo}
-	<ImmutableTodo {todo} on:click={() => toggle(todo.id)} />
+	<ImmutableTodo {todo} on:click={() => toggle(todo.id)} /><br>
 {/each}
 
 <h2>Mutable</h2>
 {#each todos as todo}
-	<MutableTodo {todo} on:click={() => toggle(todo.id)} />
+	<MutableTodo {todo} on:click={() => toggle(todo.id)} /><br>
 {/each}
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
index 440c23dcbe..8044f6be4e 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
@@ -6,23 +6,25 @@
 
 	export let todo;
 
-	let div;
+	let btn;
 
 	afterUpdate(() => {
-		flash(div);
+		flash(btn);
 	});
 </script>
 
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<div bind:this={div} on:click>
+<button bind:this={btn} on:click>
 	{todo.done ? '👍' : ''}
 	{todo.text}
-</div>
+</button>
 
 <style>
-	div {
+	button {
 		cursor: pointer;
-		line-height: 1.5;
+		border:none;
+		background:none;
+		font-size:14px;
 	}
 </style>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
index 8e9676e75f..f92468ab79 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
@@ -4,23 +4,25 @@
 
 	export let todo;
 
-	let div;
+	let btn;
 
 	afterUpdate(() => {
-		flash(div);
+		flash(btn);
 	});
 </script>
 
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<div bind:this={div} on:click>
+<button bind:this={btn}>
 	{todo.done ? '👍' : ''}
 	{todo.text}
-</div>
+</button>
 
 <style>
-	div {
+	button {
 		cursor: pointer;
-		line-height: 1.5;
+		border:none;
+		background:none;
+		font-size:14px;
 	}
 </style>