From 009afd84317172089fd2174d4b479f3eeb738e77 Mon Sep 17 00:00:00 2001
From: Mattias Persson <mattias.persson.87@gmail.com>
Date: Sat, 4 May 2024 00:05:12 +0200
Subject: [PATCH] Fix warnings

---
 src/lib/Components/CodeEditor.svelte    |  2 +-
 src/lib/Components/ColorPicker.svelte   |  2 +-
 src/lib/Components/InputClear.svelte    |  2 +-
 src/lib/Components/RangeSlider.svelte   |  2 +-
 src/lib/Components/ResizeHandle.svelte  |  2 +-
 src/lib/Components/Toggle.svelte        |  2 +-
 src/lib/Drawer/AddDropdown.svelte       |  2 +-
 src/lib/Main/Button.svelte              |  5 ++++-
 src/lib/Main/Camera/HLS.svelte          |  2 +-
 src/lib/Main/Configure.svelte           |  7 ++++---
 src/lib/Main/Content.svelte             |  2 +-
 src/lib/Main/Empty.svelte               |  7 ++++---
 src/lib/Main/Views.svelte               |  2 +-
 src/lib/Modal/AppearanceConfig.svelte   | 12 ++++++++----
 src/lib/Modal/DeviceTrackerModal.svelte |  4 ++--
 src/lib/Modal/TodoModal.svelte          |  8 ++++----
 src/lib/Modal/UpdateModal.svelte        |  2 +-
 src/lib/Sidebar/Bar.svelte              |  2 +-
 src/lib/Sidebar/Divider.svelte          |  2 +-
 src/lib/Sidebar/Iframe.svelte           |  2 +-
 src/lib/Sidebar/Index.svelte            |  9 ++++++---
 src/lib/Sidebar/Navigate.svelte         |  2 +-
 src/lib/Sidebar/Notifications.svelte    |  5 +++--
 src/lib/Sidebar/Template.svelte         | 11 ++++++++---
 src/lib/Sidebar/Weather.svelte          |  3 +--
 src/lib/Sidebar/WeatherForecast.svelte  |  3 +--
 src/routes/+layout.svelte               |  4 ++--
 27 files changed, 62 insertions(+), 46 deletions(-)

diff --git a/src/lib/Components/CodeEditor.svelte b/src/lib/Components/CodeEditor.svelte
index 5fcb5ae4..0c35f019 100644
--- a/src/lib/Components/CodeEditor.svelte
+++ b/src/lib/Components/CodeEditor.svelte
@@ -282,7 +282,7 @@
 	}
 </script>
 
-<div class="editor" bind:this={editor} />
+<div class="editor" bind:this={editor}></div>
 
 <style>
 	.editor {
diff --git a/src/lib/Components/ColorPicker.svelte b/src/lib/Components/ColorPicker.svelte
index a4dd06d1..252046de 100644
--- a/src/lib/Components/ColorPicker.svelte
+++ b/src/lib/Components/ColorPicker.svelte
@@ -173,7 +173,7 @@
 	style:margin-top={supportedColorModes?.length !== 1 ? '2em' : '0'}
 	style:opacity={entity?.state === 'off' ? '0.25' : 'unset'}
 	style:transition="all {$motion}ms ease"
-/>
+></div>
 
 {#if tempSelected && kelvinNumber && interacting}
 	<span
diff --git a/src/lib/Components/InputClear.svelte b/src/lib/Components/InputClear.svelte
index 2a5b6934..908e8c46 100644
--- a/src/lib/Components/InputClear.svelte
+++ b/src/lib/Components/InputClear.svelte
@@ -31,7 +31,7 @@
 	{/if}
 
 	{#if condition && select}
-		<div class="divider" transition:fade={{ duration: $motion / 2 }} />
+		<div class="divider" transition:fade={{ duration: $motion / 2 }}></div>
 	{/if}
 </div>
 
diff --git a/src/lib/Components/RangeSlider.svelte b/src/lib/Components/RangeSlider.svelte
index 5064f24a..488972dd 100644
--- a/src/lib/Components/RangeSlider.svelte
+++ b/src/lib/Components/RangeSlider.svelte
@@ -31,7 +31,7 @@
 </script>
 
 <div>
-	<span style:width="{$fill * 100}%" />
+	<span style:width="{$fill * 100}%"></span>
 	<input
 		name="slider"
 		type="range"
diff --git a/src/lib/Components/ResizeHandle.svelte b/src/lib/Components/ResizeHandle.svelte
index 1ed3e357..4ae7e490 100644
--- a/src/lib/Components/ResizeHandle.svelte
+++ b/src/lib/Components/ResizeHandle.svelte
@@ -35,7 +35,7 @@
 <svelte:document on:pointermove={handlePointerMove} on:pointerup={handlePointer} />
 
 <div class="handle" on:pointerdown={handlePointer}>
-	<div class="area" />
+	<div class="area"></div>
 </div>
 
 <div class="icon" transition:fade={{ duration: $motion }}>
diff --git a/src/lib/Components/Toggle.svelte b/src/lib/Components/Toggle.svelte
index a0eb879d..e167cb04 100644
--- a/src/lib/Components/Toggle.svelte
+++ b/src/lib/Components/Toggle.svelte
@@ -5,7 +5,7 @@
 
 <label class="switch">
 	<input name="toggle" type="checkbox" bind:checked on:change />
-	<span class="slider" data-exclude-drag-modal />
+	<span class="slider" data-exclude-drag-modal></span>
 </label>
 
 <style>
diff --git a/src/lib/Drawer/AddDropdown.svelte b/src/lib/Drawer/AddDropdown.svelte
index 660a9052..a7a4d09d 100644
--- a/src/lib/Drawer/AddDropdown.svelte
+++ b/src/lib/Drawer/AddDropdown.svelte
@@ -93,7 +93,7 @@
 			class="triangle"
 			in:fade={{ duration: $motion / 3, easing: cubicOut }}
 			out:fade={{ duration: $motion / 3, easing: cubicOut }}
-		/>
+		></div>
 	{/if}
 </div>
 
diff --git a/src/lib/Main/Button.svelte b/src/lib/Main/Button.svelte
index b1476f17..e856bd22 100644
--- a/src/lib/Main/Button.svelte
+++ b/src/lib/Main/Button.svelte
@@ -457,6 +457,9 @@
 				handleEvent(event);
 			}
 		}}
+		on:keydown
+		role="button"
+		tabindex="0"
 	>
 		<div
 			class="icon"
@@ -495,7 +498,7 @@
 		</div>
 	</div>
 
-	<div class="right" on:click|stopPropagation={handleEvent}>
+	<div class="right" on:click|stopPropagation={handleEvent} on:keydown role="button" tabindex="0">
 		<!-- NAME -->
 		<div class="name" data-state={stateOn}>
 			{@html (sel?.template?.name && template?.name?.output) ||
diff --git a/src/lib/Main/Camera/HLS.svelte b/src/lib/Main/Camera/HLS.svelte
index fdc96dee..c39eb391 100644
--- a/src/lib/Main/Camera/HLS.svelte
+++ b/src/lib/Main/Camera/HLS.svelte
@@ -130,7 +130,7 @@
 		style:display={$editMode ? 'none' : 'initial'}
 		style:width={responsive ? '100%' : 'calc(14.5rem * 2 + 0.4rem)'}
 		style:object-fit={size}
-	/>
+	></video>
 {/if}
 
 <style>
diff --git a/src/lib/Main/Configure.svelte b/src/lib/Main/Configure.svelte
index aecb9171..e3c3546c 100644
--- a/src/lib/Main/Configure.svelte
+++ b/src/lib/Main/Configure.svelte
@@ -31,13 +31,14 @@
 	});
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
 	style:height="{$itemHeight}px"
 	on:click={handleClick}
 	style:cursor={$editMode ? 'unset' : 'pointer'}
-/>
+	on:keydown
+	role="button"
+	tabindex="0"
+></div>
 
 <style>
 	div {
diff --git a/src/lib/Main/Content.svelte b/src/lib/Main/Content.svelte
index 6c273a6e..ea2cae46 100644
--- a/src/lib/Main/Content.svelte
+++ b/src/lib/Main/Content.svelte
@@ -11,7 +11,7 @@
 </script>
 
 {#if item?.[SHADOW_ITEM_MARKER_PROPERTY_NAME] && item?.type === 'media'}
-	<div class="shadow" />
+	<div class="shadow"></div>
 {/if}
 
 {#if item?.type === 'configure'}
diff --git a/src/lib/Main/Empty.svelte b/src/lib/Main/Empty.svelte
index 2f886acb..fa6b3811 100644
--- a/src/lib/Main/Empty.svelte
+++ b/src/lib/Main/Empty.svelte
@@ -14,15 +14,16 @@
 	}
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
 	on:click={handleClick}
 	class="container"
 	style:height="{$itemHeight}px"
 	style:opacity={$editMode ? '1' : '0'}
 	style:transition="opacity {$motion}ms ease"
-/>
+	on:keydown
+	role="button"
+	tabindex="0"
+></div>
 
 <style>
 	.container {
diff --git a/src/lib/Main/Views.svelte b/src/lib/Main/Views.svelte
index 76488a84..d980be2e 100644
--- a/src/lib/Main/Views.svelte
+++ b/src/lib/Main/Views.svelte
@@ -157,7 +157,7 @@
 							style:left="{left}px"
 							style:opacity={$draggingView ? '0' : '1'}
 							style:transition="width {$motion}ms ease, left {$draggingView ? '0' : $motion}ms ease"
-						/>
+						></div>
 					{/key}
 				</div>
 			</div>
diff --git a/src/lib/Modal/AppearanceConfig.svelte b/src/lib/Modal/AppearanceConfig.svelte
index 939b6afa..92a1a885 100644
--- a/src/lib/Modal/AppearanceConfig.svelte
+++ b/src/lib/Modal/AppearanceConfig.svelte
@@ -147,13 +147,14 @@
 							<div
 								class="image-area"
 								style:background-image="url('{base}/themes/{theme?.title}_thumbnail.webp')"
-							/>
+							></div>
+
 							<div class="description-area">
 								<div class="description">
 									<div class="name">{theme?.title}</div>
 									<div class="author">{theme?.author}</div>
 									<div class="edit-area">
-										<button
+										<div
 											use:Ripple={{
 												...$ripple,
 												color: 'rgba(0, 0, 0, 0.35)'
@@ -164,9 +165,12 @@
 													theme: theme
 												});
 											}}
+											on:keydown
+											role="button"
+											tabindex="0"
 										>
 											<Icon icon="solar:pen-2-bold-duotone" height="none" />
-										</button>
+										</div>
 									</div>
 								</div>
 							</div>
@@ -182,7 +186,7 @@
 						style:width
 						style:height
 						style:transition
-					/>
+					></div>
 				{/if}
 			</div>
 		{/if}
diff --git a/src/lib/Modal/DeviceTrackerModal.svelte b/src/lib/Modal/DeviceTrackerModal.svelte
index 15b1241e..a7a86e49 100644
--- a/src/lib/Modal/DeviceTrackerModal.svelte
+++ b/src/lib/Modal/DeviceTrackerModal.svelte
@@ -283,7 +283,7 @@
 						});
 					}}
 				>
-					<span class="maplibregl-ctrl-icon mapboxgl-ctrl-icon" />
+					<span class="maplibregl-ctrl-icon mapboxgl-ctrl-icon"></span>
 				</button>
 			</div>
 		</div>
@@ -320,7 +320,7 @@
 
 		<!-- marker -->
 		<div class="marker-container" bind:this={markerContainer}>
-			<div class="pulse" />
+			<div class="pulse"></div>
 
 			<button
 				id="marker"
diff --git a/src/lib/Modal/TodoModal.svelte b/src/lib/Modal/TodoModal.svelte
index 7226148c..e5796023 100644
--- a/src/lib/Modal/TodoModal.svelte
+++ b/src/lib/Modal/TodoModal.svelte
@@ -250,8 +250,7 @@
 									on:input={(event) => handleStatus(event, item.uid)}
 								/>
 							</label>
-							<!-- svelte-ignore a11y-click-events-have-key-events -->
-							<!-- svelte-ignore a11y-no-static-element-interactions -->
+
 							<span
 								class="item-name"
 								on:click={async () => {
@@ -262,13 +261,14 @@
 										inputElement.focus();
 									}
 								}}
+								on:keydown
+								role="button"
+								tabindex="0"
 							>
 								{#if selectedId === item.uid}
 									<form on:submit={handleSubmit}>
-										<!-- svelte-ignore a11y-autofocus -->
 										<input
 											id={item.uid}
-											autofocus={true}
 											value={item.summary}
 											class="inputname"
 											on:change={(event) => handleRename(event, item.uid)}
diff --git a/src/lib/Modal/UpdateModal.svelte b/src/lib/Modal/UpdateModal.svelte
index a1a639ba..ecfa3ade 100644
--- a/src/lib/Modal/UpdateModal.svelte
+++ b/src/lib/Modal/UpdateModal.svelte
@@ -115,7 +115,7 @@
 				max="100"
 				style:opacity={inProgress ? '1' : '0.5'}
 				style:transition="opacity {$motion}ms ease"
-			/>
+			></progress>
 		{/if}
 
 		<!-- SPECIFIC_VERSION -->
diff --git a/src/lib/Sidebar/Bar.svelte b/src/lib/Sidebar/Bar.svelte
index 4bf7c6d9..f7a7f565 100644
--- a/src/lib/Sidebar/Bar.svelte
+++ b/src/lib/Sidebar/Bar.svelte
@@ -88,7 +88,7 @@
 			class="fill"
 			style:transition={mounted ? `width ${$motion}ms ease` : 'none'}
 			style:width="{expression}%"
-		/>
+		></div>
 	</div>
 </div>
 
diff --git a/src/lib/Sidebar/Divider.svelte b/src/lib/Sidebar/Divider.svelte
index 0478a35c..e3f9fd55 100644
--- a/src/lib/Sidebar/Divider.svelte
+++ b/src/lib/Sidebar/Divider.svelte
@@ -19,7 +19,7 @@
 			style:height={`${size || defaultValue}px`}
 			style:opacity={$editMode ? '1' : '0'}
 			style:transition="opacity {$motion}ms ease, height {$motion}ms ease"
-		/>
+		></div>
 	{:else}
 		<div class="hr-padding" bind:clientHeight>
 			<hr />
diff --git a/src/lib/Sidebar/Iframe.svelte b/src/lib/Sidebar/Iframe.svelte
index 5bb34e76..7bf68876 100644
--- a/src/lib/Sidebar/Iframe.svelte
+++ b/src/lib/Sidebar/Iframe.svelte
@@ -14,7 +14,7 @@
 			style:height={size || '150px'}
 			style:pointer-events={$editMode ? 'none' : 'unset'}
 			title={$lang('iframe')}
-		/>
+		></iframe>
 	{:else}
 		<div class="placeholder center" style:height={size || '150px'}>
 			<div class="icon">
diff --git a/src/lib/Sidebar/Index.svelte b/src/lib/Sidebar/Index.svelte
index 22c2a680..bd82cfbb 100644
--- a/src/lib/Sidebar/Index.svelte
+++ b/src/lib/Sidebar/Index.svelte
@@ -237,7 +237,7 @@
 
 						<!-- CONFIGURE -->
 					{:else if Configure && item?.type === 'configure'}
-						<div role="button" tabindex="0" on:click={() => handleClick(item?.id)}>
+						<div on:click={() => handleClick(item?.id)} on:keydown role="button" tabindex="0">
 							<svelte:component this={Configure.default} sel={item} />
 						</div>
 
@@ -306,6 +306,9 @@
 								on:click|preventDefault={() => {
 									if ($editMode) handleClick(item?.id);
 								}}
+								on:keydown
+								role="button"
+								tabindex="0"
 							>
 								<svelte:component this={Navigate.default} />
 							</div>
@@ -313,7 +316,7 @@
 
 						<!-- RADIAL -->
 					{:else if Radial && item?.type === 'radial' && !hide_mobile}
-						<div on:click={() => handleClick(item?.id)}>
+						<div on:click={() => handleClick(item?.id)} on:keydown role="button" tabindex="0">
 							<svelte:component
 								this={Radial.default}
 								entity_id={item?.entity_id}
@@ -324,7 +327,7 @@
 
 						<!-- SENSOR -->
 					{:else if Sensor && item?.type === 'sensor' && !hide_mobile}
-						<div on:click={() => handleClick(item?.id)}>
+						<div on:click={() => handleClick(item?.id)} on:keydown role="button" tabindex="0">
 							<svelte:component
 								this={Sensor.default}
 								entity_id={item?.entity_id}
diff --git a/src/lib/Sidebar/Navigate.svelte b/src/lib/Sidebar/Navigate.svelte
index 21ffd9b4..85a5cc1e 100644
--- a/src/lib/Sidebar/Navigate.svelte
+++ b/src/lib/Sidebar/Navigate.svelte
@@ -96,7 +96,7 @@
 		{/each}
 
 		{#if !$draggingView && modalTransitionEnd}
-			<div class="navigate selected" style:top style:left style:height style:transition />
+			<div class="navigate selected" style:top style:left style:height style:transition></div>
 		{/if}
 	{:else}
 		{$lang('navigate')}
diff --git a/src/lib/Sidebar/Notifications.svelte b/src/lib/Sidebar/Notifications.svelte
index 68f13df6..efd4f135 100644
--- a/src/lib/Sidebar/Notifications.svelte
+++ b/src/lib/Sidebar/Notifications.svelte
@@ -56,8 +56,6 @@
 </script>
 
 {#if sel?.expand === false || (empty && $editMode)}
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
-	<!-- svelte-ignore a11y-no-static-element-interactions -->
 	<div
 		transition:slide={{ duration: $motion }}
 		class="toggle"
@@ -66,6 +64,9 @@
 			if ($editMode || empty) return;
 			expanded = !expanded;
 		}}
+		on:keydown
+		role="button"
+		tabindex="0"
 	>
 		{#if !empty}
 			{length}
diff --git a/src/lib/Sidebar/Template.svelte b/src/lib/Sidebar/Template.svelte
index df3e92be..c22fae0c 100644
--- a/src/lib/Sidebar/Template.svelte
+++ b/src/lib/Sidebar/Template.svelte
@@ -78,9 +78,14 @@
 	});
 </script>
 
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div id="markdown" on:click={handleEvent} on:pointerenter={handleEvent}>
+<div
+	id="markdown"
+	on:click={handleEvent}
+	on:pointerenter={handleEvent}
+	on:keydown
+	role="button"
+	tabindex="0"
+>
 	{#if demo}
 		<div class="template">
 			<span>&#123;&#123;</span> template <span>&#125;&#125;</span>
diff --git a/src/lib/Sidebar/Weather.svelte b/src/lib/Sidebar/Weather.svelte
index 4b8065dc..af515e47 100644
--- a/src/lib/Sidebar/Weather.svelte
+++ b/src/lib/Sidebar/Weather.svelte
@@ -23,8 +23,7 @@
 {#if entity && entity?.state !== 'unavailable'}
 	<div class="container">
 		<div class="icon">
-			<!-- svelte-ignore a11y-missing-attribute -->
-			<img {src} width="100%" height="100%" />
+			<img {src} width="100%" height="100%" alt="" />
 		</div>
 
 		{#if attributes?.temperature}
diff --git a/src/lib/Sidebar/WeatherForecast.svelte b/src/lib/Sidebar/WeatherForecast.svelte
index b0742f86..d057a8c2 100644
--- a/src/lib/Sidebar/WeatherForecast.svelte
+++ b/src/lib/Sidebar/WeatherForecast.svelte
@@ -108,8 +108,7 @@
 				<div class="icon">
 					{#if forecast.icon.local}
 						<icon class="ff-fill">
-							<!-- svelte-ignore a11y-missing-attribute -->
-							<img src="{forecast.icon.icon_variant_day}.svg" width="100%" height="100%" />
+							<img src="{forecast.icon.icon_variant_day}.svg" width="100%" height="100%" alt="" />
 						</icon>
 					{:else}
 						<Icon icon={forecast.icon.icon_variant_day} width="100%" height="100%"></Icon>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index cabc057a..f491015e 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -14,7 +14,6 @@
 </svelte:head>
 
 <Modals>
-	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div
 		slot="backdrop"
 		class="backdrop"
@@ -26,9 +25,10 @@
 			easing: expoOut
 		}}
 		out:fade={{ duration: $motion / 2 }}
+		on:keydown
 		role="button"
 		tabindex="0"
-	/>
+	></div>
 
 	<div slot="loading">
 		<Loader />