marcel/familienarchiv
1
0
Fork 0
Code Issues 119 Pull Requests 2 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
// actions are the only touch-reachable controls for those operations. They must
// 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', () => {
it('delete button has a >=44px hit area in both dimensions', async () => {
it('delete button carries the 44px minimum-target-size classes', 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);
expect(btn.className).toContain('min-h-[44px]');
expect(btn.className).toContain('min-w-[44px]');
});
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 });
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);
expect(btn.className).toContain('min-h-[44px]');
expect(btn.className).toContain('min-w-[44px]');
});
});