From f506184c12a6327180d36e8b526ef67dcbfff526 Mon Sep 17 00:00:00 2001
From: Jeremy Fievet <unixsafedev@gmail.com>
Date: Tue, 2 Jun 2026 22:56:52 +0200
Subject: [PATCH] fix: resolve modal accessibility warnings

---
 src/lib/components/ConfirmDialog.svelte     |  9 ++++-----
 src/lib/components/GlobalSearch.svelte      |  9 +++------
 src/lib/components/KeyboardShortcuts.svelte |  9 ++++-----
 src/lib/components/LockScreen.svelte        |  1 -
 src/lib/components/OnboardingModal.svelte   |  5 ++---
 src/lib/components/Sidebar.svelte           |  8 +++-----
 src/lib/components/SplitModal.svelte        |  5 ++---
 src/routes/accounts/+page.svelte            | 10 ++++------
 src/routes/budget/+page.svelte              |  5 ++---
 src/routes/projects/+page.svelte            |  5 ++---
 src/routes/recurring/+page.svelte           |  5 ++---
 src/routes/transactions/+page.svelte        |  5 ++---
 12 files changed, 30 insertions(+), 46 deletions(-)

diff --git a/src/lib/components/ConfirmDialog.svelte b/src/lib/components/ConfirmDialog.svelte
index c9e63df..a3abac5 100644
--- a/src/lib/components/ConfirmDialog.svelte
+++ b/src/lib/components/ConfirmDialog.svelte
@@ -52,16 +52,15 @@
 
 {#if open}
 	{@const style = variantStyles[variant]}
-	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-	<div class="fixed inset-0 z-[150] flex items-center justify-center modal-overlay animate-fade-in" onclick={oncancel}>
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-		<div class="relative w-full max-w-sm glass-card p-6 shadow-2xl animate-modal-in mx-4" onclick={(e) => e.stopPropagation()}>
+	<div class="fixed inset-0 z-[150] flex items-center justify-center modal-overlay animate-fade-in" role="dialog" aria-modal="true" aria-labelledby="confirm-title">
+		<button type="button" class="absolute inset-0" onclick={oncancel} aria-label="Annuler"></button>
+		<div class="relative w-full max-w-sm glass-card p-6 shadow-2xl animate-modal-in mx-4">
 			<div class="flex items-start gap-4">
 				<div class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl {style.iconBg}">
 					<AlertTriangle size={20} class={style.iconColor} strokeWidth={1.8} />
 				</div>
 				<div class="flex-1">
-					<h3 class="text-[15px] font-semibold text-text-primary">{title}</h3>
+					<h3 id="confirm-title" class="text-[15px] font-semibold text-text-primary">{title}</h3>
 					<p class="mt-1.5 text-[13px] text-text-secondary leading-relaxed">{message}</p>
 				</div>
 			</div>
diff --git a/src/lib/components/GlobalSearch.svelte b/src/lib/components/GlobalSearch.svelte
index 58a45ce..b0a49d4 100644
--- a/src/lib/components/GlobalSearch.svelte
+++ b/src/lib/components/GlobalSearch.svelte
@@ -125,12 +125,9 @@
 }} />
 
 {#if open}
-	<!-- Backdrop -->
-	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-	<div class="fixed inset-0 z-[200] modal-overlay animate-fade-in" onclick={() => (open = false)}>
-		<!-- Search dialog -->
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-		<div class="mx-auto mt-[15vh] w-full max-w-xl px-4" onclick={(e) => e.stopPropagation()}>
+	<div class="fixed inset-0 z-[200] modal-overlay animate-fade-in" role="dialog" aria-modal="true" aria-label="Recherche globale">
+		<button type="button" class="absolute inset-0" onclick={() => (open = false)} aria-label="Fermer la recherche"></button>
+		<div class="relative mx-auto mt-[15vh] w-full max-w-xl px-4">
 			<div class="glass-card shadow-2xl overflow-hidden animate-modal-in">
 				<!-- Search input -->
 				<div class="flex items-center gap-3 border-b border-glass-border px-5 py-4">
diff --git a/src/lib/components/KeyboardShortcuts.svelte b/src/lib/components/KeyboardShortcuts.svelte
index fd12094..5cbc458 100644
--- a/src/lib/components/KeyboardShortcuts.svelte
+++ b/src/lib/components/KeyboardShortcuts.svelte
@@ -59,12 +59,11 @@
 <svelte:window onkeydown={handleKeydown} />
 
 {#if showHelp}
-	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-	<div class="fixed inset-0 z-[200] modal-overlay animate-fade-in" onclick={() => (showHelp = false)}>
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-		<div class="mx-auto mt-[12vh] w-full max-w-md px-4" onclick={(e) => e.stopPropagation()}>
+	<div class="fixed inset-0 z-[200] modal-overlay animate-fade-in" role="dialog" aria-modal="true" aria-labelledby="shortcuts-title">
+		<button type="button" class="absolute inset-0" onclick={() => (showHelp = false)} aria-label="Fermer les raccourcis"></button>
+		<div class="relative mx-auto mt-[12vh] w-full max-w-md px-4">
 			<div class="glass-card shadow-2xl overflow-hidden animate-modal-in p-6">
-				<h2 class="text-lg font-bold text-text-primary mb-5">Raccourcis clavier</h2>
+				<h2 id="shortcuts-title" class="text-lg font-bold text-text-primary mb-5">Raccourcis clavier</h2>
 
 				<div class="space-y-4">
 					<div>
diff --git a/src/lib/components/LockScreen.svelte b/src/lib/components/LockScreen.svelte
index 2f6cf4a..743056c 100644
--- a/src/lib/components/LockScreen.svelte
+++ b/src/lib/components/LockScreen.svelte
@@ -66,7 +66,6 @@
 						type={showPassword ? 'text' : 'password'}
 						bind:value={password}
 						placeholder="Mot de passe"
-						autofocus
 						class="w-full rounded-2xl border border-border/60 bg-bg-input px-5 py-3.5 pr-12 text-center text-[15px] tracking-wide text-text-primary outline-none placeholder:text-text-muted/70 focus-ring"
 					/>
 					<button
diff --git a/src/lib/components/OnboardingModal.svelte b/src/lib/components/OnboardingModal.svelte
index 067224c..74f194a 100644
--- a/src/lib/components/OnboardingModal.svelte
+++ b/src/lib/components/OnboardingModal.svelte
@@ -78,9 +78,8 @@
 
 <svelte:window onkeydown={handleKeydown} />
 
-<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog">
-	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-	<div class="absolute inset-0" onclick={onclose}></div>
+<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog" aria-modal="true" aria-label="Découverte de BudgetView">
+	<button type="button" class="absolute inset-0" onclick={onclose} aria-label="Fermer la découverte"></button>
 	<div class="relative w-full max-w-lg glass-card p-10 shadow-2xl animate-modal-in mx-4 text-center">
 		{#if steps[step]}
 		{@const s = steps[step]}
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index 953b883..71a49cd 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -256,11 +256,9 @@
 
 <!-- Mobile more sheet -->
 {#if showMoreSheet}
-	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-	<div class="fixed inset-0 z-40 md:hidden" onclick={() => (showMoreSheet = false)}>
-		<div class="absolute inset-0 bg-black/40 backdrop-blur-sm animate-fade-in"></div>
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-		<div class="absolute bottom-[72px] left-0 right-0 safe-area-bottom" onclick={(e) => e.stopPropagation()}>
+	<div class="fixed inset-0 z-40 md:hidden" role="dialog" aria-modal="true" aria-label="Navigation secondaire">
+		<button type="button" class="absolute inset-0 bg-black/40 backdrop-blur-sm animate-fade-in" onclick={() => (showMoreSheet = false)} aria-label="Fermer la navigation"></button>
+		<div class="absolute bottom-[72px] left-0 right-0 safe-area-bottom">
 			<div class="mx-3 mb-2 glass rounded-2xl overflow-hidden shadow-2xl animate-slide-up p-2">
 				<div class="grid grid-cols-4 gap-1">
 					{#each moreNav as item}
diff --git a/src/lib/components/SplitModal.svelte b/src/lib/components/SplitModal.svelte
index aa9e0a3..917b5d8 100644
--- a/src/lib/components/SplitModal.svelte
+++ b/src/lib/components/SplitModal.svelte
@@ -98,9 +98,8 @@
 
 <svelte:window on:keydown={handleKeydown} />
 
-<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog" aria-label="Ventiler la transaction">
-	<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-	<div class="absolute inset-0" onclick={onclose}></div>
+<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog" aria-modal="true" aria-label="Ventiler la transaction">
+	<button type="button" class="absolute inset-0" onclick={onclose} aria-label="Fermer la ventilation"></button>
 	<div class="relative w-full max-w-lg glass-card p-7 shadow-2xl animate-modal-in mx-4">
 		<div class="mb-6 flex items-center justify-between">
 			<h2 class="text-xl font-bold tracking-tight text-text-primary">Ventiler la transaction</h2>
diff --git a/src/routes/accounts/+page.svelte b/src/routes/accounts/+page.svelte
index ef28810..3086ae0 100644
--- a/src/routes/accounts/+page.svelte
+++ b/src/routes/accounts/+page.svelte
@@ -362,9 +362,8 @@
 
 <!-- Modal -->
 {#if showForm}
-	<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog">
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-		<div class="absolute inset-0" onclick={() => (showForm = false)}></div>
+	<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog" aria-modal="true" aria-label={editingId ? 'Modifier le compte' : 'Nouveau compte'}>
+		<button type="button" class="absolute inset-0" onclick={() => (showForm = false)} aria-label="Fermer le formulaire"></button>
 		<div class="relative w-full max-w-md glass-card p-7 shadow-2xl animate-modal-in mx-4">
 			<div class="mb-6 flex items-center justify-between">
 				<h2 class="text-xl font-bold tracking-tight text-text-primary">
@@ -475,9 +474,8 @@
 
 <!-- Balance correction modal -->
 {#if showBalanceCorrection}
-	<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog">
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-		<div class="absolute inset-0" onclick={() => (showBalanceCorrection = false)}></div>
+	<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog" aria-modal="true" aria-label="Ajuster le solde">
+		<button type="button" class="absolute inset-0" onclick={() => (showBalanceCorrection = false)} aria-label="Fermer l'ajustement du solde"></button>
 		<div class="relative w-full max-w-sm glass-card p-7 shadow-2xl animate-modal-in mx-4">
 			<div class="mb-6 flex items-center justify-between">
 				<h2 class="text-xl font-bold tracking-tight text-text-primary">Ajuster le solde</h2>
diff --git a/src/routes/budget/+page.svelte b/src/routes/budget/+page.svelte
index d8a3dd7..767df23 100644
--- a/src/routes/budget/+page.svelte
+++ b/src/routes/budget/+page.svelte
@@ -451,9 +451,8 @@
 
 <!-- Modal series -->
 {#if showSeriesForm}
-	<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog">
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-		<div class="absolute inset-0" onclick={() => (showSeriesForm = false)}></div>
+	<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog" aria-modal="true" aria-label={editingSeriesId ? 'Modifier la catégorie' : 'Nouvelle catégorie'}>
+		<button type="button" class="absolute inset-0" onclick={() => (showSeriesForm = false)} aria-label="Fermer le formulaire"></button>
 		<div class="relative w-full max-w-md glass-card p-7 shadow-2xl animate-modal-in mx-4">
 			<div class="mb-6 flex items-center justify-between">
 				<h2 class="text-xl font-bold tracking-tight text-text-primary">
diff --git a/src/routes/projects/+page.svelte b/src/routes/projects/+page.svelte
index 86f4ba6..b117cbd 100644
--- a/src/routes/projects/+page.svelte
+++ b/src/routes/projects/+page.svelte
@@ -235,9 +235,8 @@
 
 <!-- Modal -->
 {#if showForm}
-	<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog">
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-		<div class="absolute inset-0" onclick={() => (showForm = false)}></div>
+	<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog" aria-modal="true" aria-label={editingId ? 'Modifier le projet' : 'Nouveau projet'}>
+		<button type="button" class="absolute inset-0" onclick={() => (showForm = false)} aria-label="Fermer le formulaire"></button>
 		<div class="relative w-full max-w-lg glass-card p-8 shadow-2xl animate-modal-in mx-4">
 			<div class="mb-7 flex items-center justify-between">
 				<h2 class="text-title text-text-primary">{editingId ? 'Modifier le projet' : 'Nouveau projet'}</h2>
diff --git a/src/routes/recurring/+page.svelte b/src/routes/recurring/+page.svelte
index 2d0e5e6..6802931 100644
--- a/src/routes/recurring/+page.svelte
+++ b/src/routes/recurring/+page.svelte
@@ -254,9 +254,8 @@
 
 <!-- Modal -->
 {#if showForm}
-	<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog">
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-		<div class="absolute inset-0" onclick={() => (showForm = false)}></div>
+	<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog" aria-modal="true" aria-label={editingId ? 'Modifier la récurrence' : 'Nouvelle récurrence'}>
+		<button type="button" class="absolute inset-0" onclick={() => (showForm = false)} aria-label="Fermer le formulaire"></button>
 		<div class="relative w-full max-w-lg glass-card p-8 shadow-2xl animate-modal-in mx-4">
 			<div class="mb-7 flex items-center justify-between">
 				<h2 class="text-title text-text-primary">{editingId ? 'Modifier la récurrence' : 'Nouvelle récurrence'}</h2>
diff --git a/src/routes/transactions/+page.svelte b/src/routes/transactions/+page.svelte
index d18620b..8a255ed 100644
--- a/src/routes/transactions/+page.svelte
+++ b/src/routes/transactions/+page.svelte
@@ -841,9 +841,8 @@
 
 <!-- Modal add/edit -->
 {#if showForm}
-	<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog">
-		<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
-		<div class="absolute inset-0" onclick={() => (showForm = false)}></div>
+	<div class="fixed inset-0 z-50 flex items-center justify-center modal-overlay animate-fade-in" role="dialog" aria-modal="true" aria-label={editingId ? 'Modifier la transaction' : 'Nouvelle transaction'}>
+		<button type="button" class="absolute inset-0" onclick={() => (showForm = false)} aria-label="Fermer le formulaire"></button>
 		<div class="relative w-full max-w-md glass-card p-7 shadow-2xl animate-modal-in mx-4">
 			<div class="mb-6 flex items-center justify-between">
 				<h2 class="text-xl font-bold tracking-tight text-text-primary">