Skip to content

[codex] resolve modal accessibility warnings #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
UnixSafe wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

[codex] resolve modal accessibility warnings #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 4 additions & 5 deletions src/lib/components/ConfirmDialog.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
9 changes: 3 additions & 6 deletions src/lib/components/GlobalSearch.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
9 changes: 4 additions & 5 deletions src/lib/components/KeyboardShortcuts.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
1 change: 0 additions & 1 deletion src/lib/components/LockScreen.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
5 changes: 2 additions & 3 deletions src/lib/components/OnboardingModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]}
Expand Down
8 changes: 3 additions & 5 deletions src/lib/components/Sidebar.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
5 changes: 2 additions & 3 deletions src/lib/components/SplitModal.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 4 additions & 6 deletions src/routes/accounts/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>
Expand Down
5 changes: 2 additions & 3 deletions src/routes/budget/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
5 changes: 2 additions & 3 deletions src/routes/projects/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 2 additions & 3 deletions src/routes/recurring/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 2 additions & 3 deletions src/routes/transactions/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
Loading