marcel/familienarchiv
1
0
Fork 0
Code Issues 126 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix(a11y): increase panel close button touch target to 44px

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-04-07 11:50:32 +02:00
parent 1b063d4e4b
commit 0a5c82cd0e
2 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/components/TranscriptionPanelHeader.svelte
View File

@@ -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"
>
<svg
class="h-4 w-4"

15
frontend/src/lib/components/TranscriptionPanelHeader.svelte.test.ts
View File

@@ -119,6 +119,21 @@ describe('TranscriptionPanelHeader', () => {
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',