From 14d11272c9add2b2827a4cea7802e052cc54cd7d Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Sun, 12 Apr 2026 16:12:37 +0200
Subject: [PATCH] fix(calendar): use button for event rows to fix a11y warnings

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../apps/web/src/lib/modules/calendar/ListView.svelte | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/apps/mana/apps/web/src/lib/modules/calendar/ListView.svelte b/apps/mana/apps/web/src/lib/modules/calendar/ListView.svelte
index 5048960b4..8736b23eb 100644
--- a/apps/mana/apps/web/src/lib/modules/calendar/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/calendar/ListView.svelte
@@ -174,8 +174,8 @@
 	<div class="event-list">
 		{#each upcomingEvents as event (event.id)}
 			{@const eventTags = getTagsByIds(allTags, event.tagIds ?? [])}
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
+			<button
+				type="button"
 				class="event-row"
 				onclick={() =>
 					navigate('detail', {
@@ -184,7 +184,6 @@
 						_siblingKey: 'eventId',
 					})}
 				oncontextmenu={(e) => ctxMenu.open(e, event)}
-				role="listitem"
 				use:dragSource={{
 					type: 'event',
 					data: () => ({
@@ -216,7 +215,7 @@
 						{/if}
 					</span>
 				</div>
-			</div>
+			</button>
 		{/each}
 
 		{#if upcomingEvents.length === 0}
@@ -302,7 +301,11 @@
 		display: flex;
 		align-items: center;
 		gap: 0.5rem;
+		width: 100%;
 		padding: 0.5rem 0.25rem;
+		border: none;
+		background: transparent;
+		text-align: left;
 		cursor: pointer;
 		border-radius: 0.25rem;
 		transition: background 0.15s;