Fix warnings

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 {

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

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>
 

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"

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

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>

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>
 

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

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>

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 {

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

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 {

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>

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}

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"

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

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

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>
 

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

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

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,14 +306,17 @@
 								on:click|preventDefault={() => {
 									if ($editMode) handleClick(item?.id);
 								}}
+								on:keydown
+								role="button"
+								tabindex="0"
 							>
 								<svelte:component this={Navigate.default} />
 							</div>
 						{/key}
 
 						<!-- 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}

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

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}

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>

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}

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>

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