From 3f27ebb013b1f50feec3e02e26861fd88cb4747b Mon Sep 17 00:00:00 2001
From: CYBWEBALI <alimurtuzapatrawala110@gmail.com>
Date: Sat, 24 Jun 2023 20:32:54 +0530
Subject: [PATCH 1/3] fix: warnings in examples page

---
 documentation/examples/04-events/00-dom-events/App.svelte   | 2 +-
 .../examples/04-events/01-inline-handlers/App.svelte        | 2 +-
 documentation/examples/08-motion/01-spring/App.svelte       | 1 +
 .../09-transitions/06-deferred-transitions/App.svelte       | 1 +
 documentation/examples/11-easing/00-easing/Controls.svelte  | 2 ++
 .../examples/15-composition/03-slot-props/Hoverable.svelte  | 2 +-
 documentation/examples/15-composition/05-modal/Modal.svelte | 4 ++--
 .../17-special-elements/00-svelte-self/Folder.svelte        | 3 ++-
 documentation/examples/20-7guis/06-7guis-circles/App.svelte | 6 ++++--
 .../21-miscellaneous/02-immutable-data/ImmutableTodo.svelte | 3 ++-
 .../21-miscellaneous/02-immutable-data/MutableTodo.svelte   | 3 ++-
 11 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/documentation/examples/04-events/00-dom-events/App.svelte b/documentation/examples/04-events/00-dom-events/App.svelte
index 54470a9a5eb2..db45bbecf0fc 100644
--- a/documentation/examples/04-events/00-dom-events/App.svelte
+++ b/documentation/examples/04-events/00-dom-events/App.svelte
@@ -7,7 +7,7 @@
 	}
 </script>
 
-<div on:mousemove={handleMousemove}>
+<div on:mousemove={handleMousemove} role='button' tabindex='0'>
 	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 24127035ad47..50f239aa86ad 100644
--- a/documentation/examples/04-events/01-inline-handlers/App.svelte
+++ b/documentation/examples/04-events/01-inline-handlers/App.svelte
@@ -2,7 +2,7 @@
 	let m = { x: 0, y: 0 };
 </script>
 
-<div on:mousemove={(e) => (m = { x: e.clientX, y: e.clientY })}>
+<div on:mousemove={(e) => (m = { x: e.clientX, y: e.clientY })} role='button' tabindex='0'>
 	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 59346dcb3b3b..70eaaae40967 100644
--- a/documentation/examples/08-motion/01-spring/App.svelte
+++ b/documentation/examples/08-motion/01-spring/App.svelte
@@ -28,6 +28,7 @@
 	on:mousemove={(e) => coords.set({ x: e.clientX, y: e.clientY })}
 	on:mousedown={() => size.set(30)}
 	on:mouseup={() => size.set(10)}
+	role='button' tabindex='0'
 >
 	<circle cx={$coords.x} cy={$coords.y} r={$size} />
 </svg>
diff --git a/documentation/examples/09-transitions/06-deferred-transitions/App.svelte b/documentation/examples/09-transitions/06-deferred-transitions/App.svelte
index c88ba67d2564..74db062fc8d0 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 5b51b8b84b06..f56a9ba8ea9b 100644
--- a/documentation/examples/11-easing/00-easing/Controls.svelte
+++ b/documentation/examples/11-easing/00-easing/Controls.svelte
@@ -28,6 +28,7 @@
 		{:else}
 			<ul>
 				{#each [...eases] as [name]}
+				<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
 					<li class:selected={name === current_ease} on:click={() => (current_ease = name)}>
 						{name}
 					</li>
@@ -46,6 +47,7 @@
 		{:else}
 			<ul>
 				{#each types as [name, type]}
+				<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
 					<li class:selected={type === current_type} on:click={() => (current_type = type)}>
 						{name}
 					</li>
diff --git a/documentation/examples/15-composition/03-slot-props/Hoverable.svelte b/documentation/examples/15-composition/03-slot-props/Hoverable.svelte
index 773a8ecf6a5b..f0d89ea27d1d 100644
--- a/documentation/examples/15-composition/03-slot-props/Hoverable.svelte
+++ b/documentation/examples/15-composition/03-slot-props/Hoverable.svelte
@@ -10,6 +10,6 @@
 	}
 </script>
 
-<div on:mouseenter={enter} on:mouseleave={leave}>
+<div on:mouseenter={enter} on:mouseleave={leave} role="button" tabindex='0'>
 	<slot {hovering} />
 </div>
diff --git a/documentation/examples/15-composition/05-modal/Modal.svelte b/documentation/examples/15-composition/05-modal/Modal.svelte
index acdbd50ab11c..0db3e7cb6cf5 100644
--- a/documentation/examples/15-composition/05-modal/Modal.svelte
+++ b/documentation/examples/15-composition/05-modal/Modal.svelte
@@ -6,13 +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()}
 >
-	<div on:click|stopPropagation>
+	<div on:click|stopPropagation role='button' tabindex='0'>
 		<slot name="header" />
 		<hr />
 		<slot />
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 8350aacf49de..eeed5f22eead 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,8 @@
 	}
 </script>
 
-<span class:expanded on:click={toggle}>{name}</span>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<span class:expanded on:click={toggle} role='button' tabindex='0'>{name}</span>
 
 {#if expanded}
 	<ul transition:slide={{ duration: 300 }}>
diff --git a/documentation/examples/20-7guis/06-7guis-circles/App.svelte b/documentation/examples/20-7guis/06-7guis-circles/App.svelte
index 7ce1e76bda9d..8cb18af8fa85 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>
-
-<svg on:click={handleClick}>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<svg on:click={handleClick} role='button' tabindex='0'>
 	{#each circles as circle}
+		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<circle
 			cx={circle.cx}
 			cy={circle.cy}
@@ -82,6 +83,7 @@ radius of the selected circle.
 				if (adjusting) selected = circle;
 			}}
 			fill={circle === selected ? '#ccc' : 'white'}
+			role='button' tabindex='0'
 		/>
 	{/each}
 </svg>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
index 440c23dcbeaf..e9a8376a8767 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
@@ -15,7 +15,8 @@
 
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<div bind:this={div} on:click>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div bind:this={div} on:click role="button" tabindex='0'>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </div>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
index 8e9676e75fd6..0ee0a0a76114 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
@@ -13,7 +13,8 @@
 
 <!-- the text will flash red whenever
 		the `todo` object changes -->
-<div bind:this={div} on:click>
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div bind:this={div} on:click role="button" tabindex='0'>
 	{todo.done ? '👍' : ''}
 	{todo.text}
 </div>

From e031c4fb2d0d6f981869f3aa81ad5a32dc7d1fc8 Mon Sep 17 00:00:00 2001
From: CYBWEBALI <alimurtuzapatrawala110@gmail.com>
Date: Mon, 26 Jun 2023 10:41:46 +0530
Subject: [PATCH 2/3] fix: warnings in examples

---
 .../examples/04-events/00-dom-events/App.svelte   |  2 +-
 .../04-events/01-inline-handlers/App.svelte       |  2 +-
 .../examples/08-motion/01-spring/App.svelte       |  1 -
 .../examples/11-easing/00-easing/Controls.svelte  | 10 ++++------
 .../15-composition/03-slot-props/Hoverable.svelte |  2 +-
 .../examples/15-composition/05-modal/Modal.svelte |  2 +-
 .../00-svelte-self/Folder.svelte                  |  8 +++++---
 .../examples/20-7guis/06-7guis-circles/App.svelte |  3 +--
 .../21-miscellaneous/02-immutable-data/App.svelte |  4 ++--
 .../02-immutable-data/ImmutableTodo.svelte        | 15 ++++++++-------
 .../02-immutable-data/MutableTodo.svelte          | 15 ++++++++-------
 11 files changed, 32 insertions(+), 32 deletions(-)

diff --git a/documentation/examples/04-events/00-dom-events/App.svelte b/documentation/examples/04-events/00-dom-events/App.svelte
index db45bbecf0fc..54470a9a5eb2 100644
--- a/documentation/examples/04-events/00-dom-events/App.svelte
+++ b/documentation/examples/04-events/00-dom-events/App.svelte
@@ -7,7 +7,7 @@
 	}
 </script>
 
-<div on:mousemove={handleMousemove} role='button' tabindex='0'>
+<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 50f239aa86ad..24127035ad47 100644
--- a/documentation/examples/04-events/01-inline-handlers/App.svelte
+++ b/documentation/examples/04-events/01-inline-handlers/App.svelte
@@ -2,7 +2,7 @@
 	let m = { x: 0, y: 0 };
 </script>
 
-<div on:mousemove={(e) => (m = { x: e.clientX, y: e.clientY })} role='button' tabindex='0'>
+<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 70eaaae40967..59346dcb3b3b 100644
--- a/documentation/examples/08-motion/01-spring/App.svelte
+++ b/documentation/examples/08-motion/01-spring/App.svelte
@@ -28,7 +28,6 @@
 	on:mousemove={(e) => coords.set({ x: e.clientX, y: e.clientY })}
 	on:mousedown={() => size.set(30)}
 	on:mouseup={() => size.set(10)}
-	role='button' tabindex='0'
 >
 	<circle cx={$coords.x} cy={$coords.y} r={$size} />
 </svg>
diff --git a/documentation/examples/11-easing/00-easing/Controls.svelte b/documentation/examples/11-easing/00-easing/Controls.svelte
index f56a9ba8ea9b..127389b4bc15 100644
--- a/documentation/examples/11-easing/00-easing/Controls.svelte
+++ b/documentation/examples/11-easing/00-easing/Controls.svelte
@@ -28,9 +28,8 @@
 		{:else}
 			<ul>
 				{#each [...eases] as [name]}
-				<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-					<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>
@@ -47,9 +46,8 @@
 		{:else}
 			<ul>
 				{#each types as [name, type]}
-				<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-noninteractive-element-interactions -->
-					<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 f0d89ea27d1d..773a8ecf6a5b 100644
--- a/documentation/examples/15-composition/03-slot-props/Hoverable.svelte
+++ b/documentation/examples/15-composition/03-slot-props/Hoverable.svelte
@@ -10,6 +10,6 @@
 	}
 </script>
 
-<div on:mouseenter={enter} on:mouseleave={leave} role="button" tabindex='0'>
+<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 0db3e7cb6cf5..1068229a21c0 100644
--- a/documentation/examples/15-composition/05-modal/Modal.svelte
+++ b/documentation/examples/15-composition/05-modal/Modal.svelte
@@ -12,7 +12,7 @@
 	on:close={() => (showModal = false)}
 	on:click|self={() => dialog.close()}
 >
-	<div on:click|stopPropagation role='button' tabindex='0'>
+	<div on:click|stopPropagation>
 		<slot name="header" />
 		<hr />
 		<slot />
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 eeed5f22eead..26a6b862526f 100644
--- a/documentation/examples/17-special-elements/00-svelte-self/Folder.svelte
+++ b/documentation/examples/17-special-elements/00-svelte-self/Folder.svelte
@@ -11,8 +11,8 @@
 	}
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<span class:expanded on:click={toggle} role='button' tabindex='0'>{name}</span>
+
+<button class:expanded on:click={toggle}>{name}</button>
 
 {#if expanded}
 	<ul transition:slide={{ duration: 300 }}>
@@ -29,12 +29,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 8cb18af8fa85..824bc949580b 100644
--- a/documentation/examples/20-7guis/06-7guis-circles/App.svelte
+++ b/documentation/examples/20-7guis/06-7guis-circles/App.svelte
@@ -70,7 +70,7 @@ radius of the selected circle.
 	<button on:click={() => travel(+1)} disabled={i === undoStack.length - 1}>redo</button>
 </div>
 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<svg on:click={handleClick} role='button' tabindex='0'>
+<svg on:click={handleClick}>
 	{#each circles as circle}
 		<!-- svelte-ignore a11y-click-events-have-key-events -->
 		<circle
@@ -83,7 +83,6 @@ radius of the selected circle.
 				if (adjusting) selected = circle;
 			}}
 			fill={circle === selected ? '#ccc' : 'white'}
-			role='button' tabindex='0'
 		/>
 	{/each}
 </svg>
diff --git a/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte b/documentation/examples/21-miscellaneous/02-immutable-data/App.svelte
index 6e9373a14d88..05d0820f9eb3 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 e9a8376a8767..8044f6be4eeb 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/ImmutableTodo.svelte
@@ -6,24 +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 -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div bind:this={div} on:click role="button" tabindex='0'>
+<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 0ee0a0a76114..f92468ab79f7 100644
--- a/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
+++ b/documentation/examples/21-miscellaneous/02-immutable-data/MutableTodo.svelte
@@ -4,24 +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 -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div bind:this={div} on:click role="button" tabindex='0'>
+<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>

From 89443803344e50c36492be44316d5bace6891218 Mon Sep 17 00:00:00 2001
From: Simon H <5968653+dummdidumm@users.noreply.github.com>
Date: Mon, 26 Jun 2023 10:38:35 +0200
Subject: [PATCH 3/3] ignore several warnings

---
 documentation/examples/04-events/00-dom-events/App.svelte       | 1 +
 documentation/examples/04-events/01-inline-handlers/App.svelte  | 1 +
 documentation/examples/08-motion/01-spring/App.svelte           | 1 +
 .../examples/15-composition/03-slot-props/Hoverable.svelte      | 1 +
 documentation/examples/15-composition/05-modal/Modal.svelte     | 1 +
 .../examples/17-special-elements/00-svelte-self/Folder.svelte   | 1 -
 documentation/examples/20-7guis/06-7guis-circles/App.svelte     | 2 +-
 7 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/documentation/examples/04-events/00-dom-events/App.svelte b/documentation/examples/04-events/00-dom-events/App.svelte
index 54470a9a5eb2..2f6eac115cb9 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 24127035ad47..4827241f30dd 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 59346dcb3b3b..e5b59901aa12 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/15-composition/03-slot-props/Hoverable.svelte b/documentation/examples/15-composition/03-slot-props/Hoverable.svelte
index 773a8ecf6a5b..fbf45e4d303f 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 1068229a21c0..3b832030fe4b 100644
--- a/documentation/examples/15-composition/05-modal/Modal.svelte
+++ b/documentation/examples/15-composition/05-modal/Modal.svelte
@@ -12,6 +12,7 @@
 	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 26a6b862526f..543a7140d38c 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,6 @@
 	}
 </script>
 
-
 <button class:expanded on:click={toggle}>{name}</button>
 
 {#if expanded}
diff --git a/documentation/examples/20-7guis/06-7guis-circles/App.svelte b/documentation/examples/20-7guis/06-7guis-circles/App.svelte
index 824bc949580b..12d79a1a0554 100644
--- a/documentation/examples/20-7guis/06-7guis-circles/App.svelte
+++ b/documentation/examples/20-7guis/06-7guis-circles/App.svelte
@@ -69,7 +69,7 @@ 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 -->
+<!-- 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 -->