From a069670a1849bf524c409b58b158c004fa0be5a6 Mon Sep 17 00:00:00 2001
From: Wuesteon <nils.weiser@outlook.com>
Date: Wed, 10 Dec 2025 22:00:53 +0100
Subject: [PATCH] fix(calendar): resolve a11y errors in calendar views
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Fix button nested inside button in TodoSidebarSection (converts outer
  button to div with separate toggle button)
- Replace role="slider" with role="separator" on resize handles in
  DayView, WeekView, and MultiDayView to avoid missing aria-valuenow
  requirement

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../lib/components/calendar/DayView.svelte    |  8 +--
 .../components/calendar/MultiDayView.svelte   |  8 +--
 .../calendar/TodoSidebarSection.svelte        | 51 +++++++++++--------
 .../lib/components/calendar/WeekView.svelte   |  8 +--
 4 files changed, 42 insertions(+), 33 deletions(-)

diff --git a/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
index aaf62dd22..4c6894068 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/DayView.svelte
@@ -472,9 +472,9 @@
 					<div
 						class="resize-handle top"
 						onpointerdown={(e) => startResize(event, 'top', e)}
-						role="slider"
+						role="separator"
+						aria-orientation="horizontal"
 						aria-label="Startzeit ändern"
-						tabindex="-1"
 					></div>
 
 					<span class="event-time">
@@ -496,9 +496,9 @@
 					<div
 						class="resize-handle bottom"
 						onpointerdown={(e) => startResize(event, 'bottom', e)}
-						role="slider"
+						role="separator"
+						aria-orientation="horizontal"
 						aria-label="Endzeit ändern"
-						tabindex="-1"
 					></div>
 				</div>
 			{/each}
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte
index 89d638460..824281d3f 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/MultiDayView.svelte
@@ -564,9 +564,9 @@
 							<div
 								class="resize-handle top"
 								onpointerdown={(e) => startResize(event, 'top', e)}
-								role="slider"
+								role="separator"
+								aria-orientation="horizontal"
 								aria-label="Startzeit ändern"
-								tabindex="-1"
 							></div>
 
 							{#if columnClass !== 'very-compact'}
@@ -580,9 +580,9 @@
 							<div
 								class="resize-handle bottom"
 								onpointerdown={(e) => startResize(event, 'bottom', e)}
-								role="slider"
+								role="separator"
+								aria-orientation="horizontal"
 								aria-label="Endzeit ändern"
-								tabindex="-1"
 							></div>
 						</div>
 					{/each}
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/TodoSidebarSection.svelte b/apps/calendar/apps/web/src/lib/components/calendar/TodoSidebarSection.svelte
index 2d2f28899..5a61b09cf 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/TodoSidebarSection.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/TodoSidebarSection.svelte
@@ -61,24 +61,26 @@
 
 <div class="todo-sidebar-section">
 	<!-- Header -->
-	<button type="button" class="section-header" onclick={toggleExpanded}>
-		<div class="header-left">
-			{#if isExpanded}
-				<ChevronDown size={16} />
-			{:else}
-				<ChevronRight size={16} />
-			{/if}
-			<CheckSquare size={16} class="section-icon" />
-			<span class="section-title">Aufgaben</span>
-			{#if totalActiveCount > 0}
-				<span class="count-badge">{totalActiveCount}</span>
-			{/if}
-			{#if overdueCount > 0}
-				<span class="overdue-badge" title="{overdueCount} überfällig">
-					<AlertTriangle size={12} />
-				</span>
-			{/if}
-		</div>
+	<div class="section-header">
+		<button type="button" class="header-toggle" onclick={toggleExpanded}>
+			<div class="header-left">
+				{#if isExpanded}
+					<ChevronDown size={16} />
+				{:else}
+					<ChevronRight size={16} />
+				{/if}
+				<CheckSquare size={16} class="section-icon" />
+				<span class="section-title">Aufgaben</span>
+				{#if totalActiveCount > 0}
+					<span class="count-badge">{totalActiveCount}</span>
+				{/if}
+				{#if overdueCount > 0}
+					<span class="overdue-badge" title="{overdueCount} überfällig">
+						<AlertTriangle size={12} />
+					</span>
+				{/if}
+			</div>
+		</button>
 		<button
 			type="button"
 			class="add-button"
@@ -87,7 +89,7 @@
 		>
 			<Plus size={16} />
 		</button>
-	</button>
+	</div>
 
 	<!-- Content -->
 	{#if isExpanded}
@@ -160,14 +162,21 @@
 		align-items: center;
 		justify-content: space-between;
 		width: 100%;
-		padding: 0.75rem 1rem;
+		padding: 0 1rem 0 0;
+	}
+
+	.header-toggle {
+		flex: 1;
+		display: flex;
+		align-items: center;
+		padding: 0.75rem 0 0.75rem 1rem;
 		border: none;
 		background: transparent;
 		cursor: pointer;
 		transition: background 150ms ease;
 	}
 
-	.section-header:hover {
+	.header-toggle:hover {
 		background: hsl(var(--color-muted) / 0.3);
 	}
 
diff --git a/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte b/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
index 4b21db563..17330c4c7 100644
--- a/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
+++ b/apps/calendar/apps/web/src/lib/components/calendar/WeekView.svelte
@@ -584,9 +584,9 @@
 							<div
 								class="resize-handle top"
 								onpointerdown={(e) => startResize(event, 'top', e)}
-								role="slider"
+								role="separator"
+								aria-orientation="horizontal"
 								aria-label="Startzeit ändern"
-								tabindex="-1"
 							></div>
 
 							<span class="event-time">
@@ -598,9 +598,9 @@
 							<div
 								class="resize-handle bottom"
 								onpointerdown={(e) => startResize(event, 'bottom', e)}
-								role="slider"
+								role="separator"
+								aria-orientation="horizontal"
 								aria-label="Endzeit ändern"
-								tabindex="-1"
 							></div>
 						</div>
 					{/each}