From 0a5c82cd0e48a28c0d04bbee26423036543aa428 Mon Sep 17 00:00:00 2001 From: Marcel Date: Tue, 7 Apr 2026 11:50:32 +0200 Subject: [PATCH] fix(a11y): increase panel close button touch target to 44px Changes h-8 w-8 (32px) to h-11 w-11 (44px) to meet project's minimum touch target standard. Co-Authored-By: Claude Sonnet 4.6 --- .../components/TranscriptionPanelHeader.svelte | 2 +- .../TranscriptionPanelHeader.svelte.test.ts | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/components/TranscriptionPanelHeader.svelte b/frontend/src/lib/components/TranscriptionPanelHeader.svelte index fd574baf..6fdd937f 100644 --- a/frontend/src/lib/components/TranscriptionPanelHeader.svelte +++ b/frontend/src/lib/components/TranscriptionPanelHeader.svelte @@ -79,7 +79,7 @@ function handleReadClick() { data-testid="panel-close" onclick={onClose} aria-label={m.transcription_panel_close()} - class="flex h-8 w-8 items-center justify-center rounded text-ink-2 transition-colors hover:bg-muted hover:text-ink" + class="flex h-11 w-11 items-center justify-center rounded text-ink-2 transition-colors hover:bg-muted hover:text-ink" > { await expect.element(page.getByText('0 Abschnitte')).toBeInTheDocument(); }); + it('should have close button with 44px touch target classes', async () => { + render(TranscriptionPanelHeader, { + mode: 'read', + hasBlocks: true, + blockCount: 3, + lastEditedAt: null, + onModeChange: () => {}, + onClose: () => {} + }); + + const closeBtn = document.querySelector('[data-testid="panel-close"]') as HTMLElement; + expect(closeBtn.classList.contains('h-11')).toBe(true); + expect(closeBtn.classList.contains('w-11')).toBe(true); + }); + it('should show formatted date when lastEditedAt is provided', async () => { render(TranscriptionPanelHeader, { mode: 'read',