docs: handle warnings in examples page (#8836)

ignore some, fix others

---------

Co-authored-by: Simon H <[email protected]>

Author: AlimurtuzaCodes

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>

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>

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)}

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">

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>

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>

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 />

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 {

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}

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}

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>

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>