From 9fc237d9eda667dce55f000f760d37b0868cdbd6 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Thu, 19 Mar 2026 12:41:23 +0100
Subject: [PATCH] feat(a11y): add skip-to-content links and ARIA labels to
 calendar, contacts, todo

- Add skip-to-content link ("Zum Inhalt springen") to all 3 app layouts
- Add id="main-content" to main content areas
- Add ariaLabel prop to shared PillNavigation component
- Set aria-label="Hauptnavigation" on nav elements in all 3 apps
- Add aria-label to icon-only nav toggle button in todo

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../apps/web/src/routes/(app)/+layout.svelte      |  9 +++++++++
 .../apps/web/src/routes/(app)/+layout.svelte      |  9 +++++++++
 .../todo/apps/web/src/routes/(app)/+layout.svelte | 15 ++++++++++++++-
 .../src/navigation/PillNavigation.svelte          |  9 ++++++++-
 4 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
index c58baecab..b9eda7e95 100644
--- a/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/calendar/apps/web/src/routes/(app)/+layout.svelte
@@ -438,6 +438,13 @@
 
 <SplitPaneContainer>
 	<div class="layout-container">
+		<a
+			href="#main-content"
+			class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:rounded-lg focus:bg-primary focus:px-4 focus:py-2 focus:text-white"
+		>
+			Zum Inhalt springen
+		</a>
+
 		<!-- UI Elements (hidden in immersive mode) -->
 		{#if !settingsStore.immersiveModeEnabled}
 			<PillNavigation
@@ -469,6 +476,7 @@
 				profileHref="/profile"
 				allAppsHref="/apps"
 				onOpenInPanel={handleOpenInPanel}
+				ariaLabel="Hauptnavigation"
 			/>
 
 			<!-- Date strip (only on main calendar page) -->
@@ -550,6 +558,7 @@
 		/>
 
 		<main
+			id="main-content"
 			class="main-content bg-background"
 			class:has-toolbar={showCalendarToolbar}
 			class:immersive={settingsStore.immersiveModeEnabled}
diff --git a/apps/contacts/apps/web/src/routes/(app)/+layout.svelte b/apps/contacts/apps/web/src/routes/(app)/+layout.svelte
index 230433451..a358319c2 100644
--- a/apps/contacts/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/contacts/apps/web/src/routes/(app)/+layout.svelte
@@ -278,6 +278,13 @@
 <SplitPaneContainer>
 	<!-- Navigation Layout -->
 	<div class="layout-container">
+		<a
+			href="#main-content"
+			class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:rounded-lg focus:bg-primary focus:px-4 focus:py-2 focus:text-white"
+		>
+			Zum Inhalt springen
+		</a>
+
 		<!-- UI Elements (hidden in immersive mode) -->
 		{#if !contactsSettings.immersiveModeEnabled}
 			<!-- Floating Pill Navigation (at bottom) -->
@@ -310,6 +317,7 @@
 				profileHref="/profile"
 				allAppsHref="/apps"
 				onOpenInPanel={handleOpenInPanel}
+				ariaLabel="Hauptnavigation"
 			/>
 
 			<!-- Global Quick Input Bar -->
@@ -342,6 +350,7 @@
 
 		<!-- Main Content -->
 		<main
+			id="main-content"
 			class="main-content bg-background"
 			class:immersive={contactsSettings.immersiveModeEnabled}
 		>
diff --git a/apps/todo/apps/web/src/routes/(app)/+layout.svelte b/apps/todo/apps/web/src/routes/(app)/+layout.svelte
index 5abc8636f..394ee0269 100644
--- a/apps/todo/apps/web/src/routes/(app)/+layout.svelte
+++ b/apps/todo/apps/web/src/routes/(app)/+layout.svelte
@@ -310,6 +310,13 @@
 
 <SplitPaneContainer>
 	<div class="layout-container">
+		<a
+			href="#main-content"
+			class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:rounded-lg focus:bg-primary focus:px-4 focus:py-2 focus:text-white"
+		>
+			Zum Inhalt springen
+		</a>
+
 		<!-- UI Elements (hidden in immersive mode) -->
 		{#if !todoSettings.immersiveModeEnabled}
 			<!-- PillNav (shown/hidden via FAB) -->
@@ -342,6 +349,7 @@
 					profileHref="/profile"
 					allAppsHref="/apps"
 					onOpenInPanel={handleOpenInPanel}
+					ariaLabel="Hauptnavigation"
 				/>
 
 				<!-- FilterStrip (shown when Filter pill is active in PillNav) -->
@@ -370,6 +378,7 @@
 				class="pillnav-fab"
 				onclick={handlePillNavToggle}
 				title={isPillNavCollapsed ? 'Navigation anzeigen' : 'Navigation ausblenden'}
+				aria-label={isPillNavCollapsed ? 'Navigation anzeigen' : 'Navigation ausblenden'}
 			>
 				{#if isPillNavCollapsed}
 					<!-- Menu icon -->
@@ -401,7 +410,11 @@
 			onToggle={() => todoSettings.toggleImmersiveMode()}
 		/>
 
-		<main class="main-content bg-background" class:immersive={todoSettings.immersiveModeEnabled}>
+		<main
+			id="main-content"
+			class="main-content bg-background"
+			class:immersive={todoSettings.immersiveModeEnabled}
+		>
 			<div
 				class="content-wrapper"
 				class:full-width={$page.url.pathname === '/kanban'}
diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte
index 148b1fad5..eb6cd2ef7 100644
--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/packages/shared-ui/src/navigation/PillNavigation.svelte
@@ -255,6 +255,8 @@
 		showA11yQuickToggles?: boolean;
 		/** Called when an app should be opened in a split panel */
 		onOpenInPanel?: (appId: string, url: string) => void;
+		/** Accessible label for the nav element */
+		ariaLabel?: string;
 	}
 
 	let {
@@ -296,6 +298,7 @@
 		onA11yReduceMotionChange,
 		showA11yQuickToggles = false,
 		onOpenInPanel,
+		ariaLabel,
 	}: Props = $props();
 
 	// Type guards for elements
@@ -443,7 +446,11 @@
 </script>
 
 {#if !isCollapsed}
-	<nav class="pill-nav" style={primaryColor ? `--pill-primary-color: ${primaryColor}` : ''}>
+	<nav
+		class="pill-nav"
+		style={primaryColor ? `--pill-primary-color: ${primaryColor}` : ''}
+		aria-label={ariaLabel}
+	>
 		<div class="pill-nav-container">
 			<!-- Logo pill / App Switcher -->
 			{#if showAppSwitcher && appItems.length > 0}