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

fix(transcription): remove annotation canvas delete button that obscured text (#722) #723

Merged
marcel merged 4 commits from fix/issue-722-remove-annotation-canvas-delete-button into main 2026-06-04 12:28:18 +02:00
Conversation 8 Commits 4 Files Changed 7 +12 -8
1 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f94e125c01 - Show all commits

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

@@ -175,23 +175,27 @@ describe('TranscriptionBlock — reorder controls', () => {
// After #722 removed the on-canvas delete button, the panel footer's icon-only // 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 // actions are the only touch-reachable controls for those operations. They must
// meet the 44×44px minimum target size in both dimensions. // meet the 44×44px minimum target size in both dimensions.
//
// We assert the sizing utility classes rather than measuring getBoundingClientRect:
// the component-test browser env (src/test-setup.ts) loads no Tailwind stylesheet,
// so class-based layout has no effect there and a rendered element collapses to its
// icon (16px). The `min-h/min-w-[44px]` classes are the exact mechanism that yields
// the WCAG target size in the real app; the compiled px size is covered by e2e.
describe('TranscriptionBlock — footer action touch targets', () => { describe('TranscriptionBlock — footer action touch targets', () => {
it('delete button has a >=44px hit area in both dimensions', async () => { it('delete button carries the 44px minimum-target-size classes', async () => {
renderBlock(); renderBlock();
const btn = (await page.getByRole('button', { name: 'Löschen' }).element()) as HTMLElement; const btn = (await page.getByRole('button', { name: 'Löschen' }).element()) as HTMLElement;
const rect = btn.getBoundingClientRect(); expect(btn.className).toContain('min-h-[44px]');
expect(rect.width).toBeGreaterThanOrEqual(44); expect(btn.className).toContain('min-w-[44px]');
expect(rect.height).toBeGreaterThanOrEqual(44);
}); });
it('review toggle button has a >=44px hit area in both dimensions', async () => { it('review toggle button carries the 44px minimum-target-size classes', async () => {
renderBlock({ reviewed: false }); renderBlock({ reviewed: false });
const btn = (await page const btn = (await page
.getByRole('button', { name: 'Als geprüft markieren' }) .getByRole('button', { name: 'Als geprüft markieren' })
.element()) as HTMLElement; .element()) as HTMLElement;
const rect = btn.getBoundingClientRect(); expect(btn.className).toContain('min-h-[44px]');
expect(rect.width).toBeGreaterThanOrEqual(44); expect(btn.className).toContain('min-w-[44px]');
expect(rect.height).toBeGreaterThanOrEqual(44);
}); });
}); });