From b32231d4f42a9eb61fe429fb17d3cb34bf27c2a0 Mon Sep 17 00:00:00 2001 From: fabi Date: Tue, 30 Jun 2026 21:23:05 +0200 Subject: [PATCH] fix(a11y): gate always-mounted sheet dialog semantics on open state MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ContextSheet and UploadSheet stay mounted (slid off-screen via translate-y) when closed, but declared role="dialog" + aria-modal="true" — and kept their buttons in the a11y tree + tab order — unconditionally. So a screen reader always saw 2+ simultaneous modal dialogs, and their controls (e.g. each sheet's "Abbrechen") collided with real open dialogs. Surfaced by the e2e a11y suite: focus-trap asserted exactly one [role=dialog] [aria-modal] and got 2; upload-cancel-confirm's getByRole('button',{name: 'Abbrechen'}) matched the composer's X *and* a closed sheet's button. Fix: when closed, drop role/aria-modal and mark the subtree aria-hidden + inert so it's out of the a11y tree and tab order entirely. Open sheets are unchanged. Verified: chromium-mobile a11y/gesture suite now 21 passed / 5 skipped / 0 a11y failures (focus-trap + upload-cancel-confirm green); svelte-check 0 errors. Co-Authored-By: Claude Opus 4.8 --- frontend/src/lib/components/ContextSheet.svelte | 6 ++++-- frontend/src/lib/components/UploadSheet.svelte | 6 ++++-- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/frontend/src/lib/components/ContextSheet.svelte b/frontend/src/lib/components/ContextSheet.svelte index 97e7acf..07562ae 100644 --- a/frontend/src/lib/components/ContextSheet.svelte +++ b/frontend/src/lib/components/ContextSheet.svelte @@ -103,8 +103,10 @@ class:translate-y-full={!open} class:translate-y-0={open} style="padding-bottom: env(safe-area-inset-bottom)" - role="dialog" - aria-modal="true" + role={open ? 'dialog' : undefined} + aria-modal={open ? 'true' : undefined} + aria-hidden={!open} + inert={!open} tabindex="-1" >
diff --git a/frontend/src/lib/components/UploadSheet.svelte b/frontend/src/lib/components/UploadSheet.svelte index bfd9a8c..9a216be 100644 --- a/frontend/src/lib/components/UploadSheet.svelte +++ b/frontend/src/lib/components/UploadSheet.svelte @@ -136,9 +136,11 @@ class:translate-y-full={!open} class:translate-y-0={open} style="padding-bottom: env(safe-area-inset-bottom)" - role="dialog" - aria-modal="true" + role={open ? 'dialog' : undefined} + aria-modal={open ? 'true' : undefined} aria-label="Hochladen" + aria-hidden={!open} + inert={!open} tabindex="-1" >