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

fix(transcription): enlarge panel block action buttons to 44px touch target (#722)

Browse Source 
The panel footer's delete and review-toggle controls were icon-only ~16px
hit areas. After #722 removed the on-canvas delete button, the panel delete
button became the only touch-reachable delete path, so it must meet the WCAG
2.2 §2.5.8 minimum target size (44×44px). Give both icon-only footer actions
a >=44px inline-flex hit area with negative margins so the row layout and the
visible icon size are unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-06-03 22:59:02 +02:00
committed by marcel
parent ad820955fd
commit 5297c70453
2 changed files with 27 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/lib/document/transcription/TranscriptionBlock.svelte
View File

@@ -231,7 +231,7 @@ async function handleDelete() {
<!-- Review toggle -->
<button
type="button"
class="cursor-pointer transition-colors {reviewed ? 'text-turquoise hover:text-turquoise/70' : 'text-ink-3 hover:text-turquoise'}"
class="-my-2 inline-flex min-h-[44px] min-w-[44px] cursor-pointer items-center justify-center transition-colors {reviewed ? 'text-turquoise hover:text-turquoise/70' : 'text-ink-3 hover:text-turquoise'}"
aria-label={reviewed ? m.transcription_block_unreview() : m.transcription_block_review()}
title={reviewed ? m.transcription_block_unreview() : m.transcription_block_review()}
onclick={onReviewToggle}
@@ -254,7 +254,7 @@ async function handleDelete() {
<!-- Delete button -->
<button
type="button"
class="hover:text-error cursor-pointer text-ink-3 transition-colors"
class="hover:text-error -my-2 -mr-2 inline-flex min-h-[44px] min-w-[44px] cursor-pointer items-center justify-center text-ink-3 transition-colors"
aria-label={m.btn_delete()}
onclick={handleDelete}
>

25
frontend/src/lib/document/transcription/TranscriptionBlock.svelte.spec.ts
View File

@@ -170,6 +170,31 @@ describe('TranscriptionBlock — reorder controls', () => {
});
});
// ─── Touch targets (WCAG 2.2 §2.5.8) ──────────────────────────────────────────
// After #722 removed the on-canvas delete button, the panel footer's icon-only
// actions are the only touch-reachable controls for those operations. They must
// meet the 44×44px minimum target size in both dimensions.
describe('TranscriptionBlock — footer action touch targets', () => {
it('delete button has a >=44px hit area in both dimensions', async () => {
renderBlock();
const btn = (await page.getByRole('button', { name: 'Löschen' }).element()) as HTMLElement;
const rect = btn.getBoundingClientRect();
expect(rect.width).toBeGreaterThanOrEqual(44);
expect(rect.height).toBeGreaterThanOrEqual(44);
});
it('review toggle button has a >=44px hit area in both dimensions', async () => {
renderBlock({ reviewed: false });
const btn = (await page
.getByRole('button', { name: 'Als geprüft markieren' })
.element()) as HTMLElement;
const rect = btn.getBoundingClientRect();
expect(rect.width).toBeGreaterThanOrEqual(44);
expect(rect.height).toBeGreaterThanOrEqual(44);
});
});
// ─── Delete confirmation ──────────────────────────────────────────────────────
function renderBlockWithService(overrides: Record<string, unknown> = {}) {