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

fix(geschichten): bump filter pills to 44px touch target

Browse Source 
Senior-author persona requires 44px minimum touch targets on every
interactive control. The /geschichten filter row had three pills
(All / chip / + Person wählen) at h-9 (36px), missing the rule that
the toolbar already follows. Bumped all three to h-11.

Test added in page.svelte.spec.ts asserts the className contains
h-11 on every pill variant.

Addresses Leonie's iteration-3 concern #6 on PR #382.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-03 09:03:55 +02:00
parent 4f3020ffab
commit 9b6d8fbef1
2 changed files with 24 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/routes/geschichten/page.svelte.spec.ts
View File

@@ -99,4 +99,25 @@ describe('geschichten page — multi-person filter chips', () => {
});
await expect.element(page.getByRole('button', { name: /Person wählen/ })).toBeVisible();
});
it('renders all filter pills with a 44px touch target (h-11)', async () => {
render(Page, {
data: makeData({
personFilters: [person('a', 'Anna A')] as PageData['personFilters']
})
});
// All three pill variants must use h-11 (44px) per the senior-author touch-target rule
const all = page.getByRole('button', { name: 'Alle' });
const chip = page.getByRole('button', { name: /Anna A aus Filter entfernen/ });
const add = page.getByRole('button', { name: /Person wählen/ });
const allEl = (await all.element()) as HTMLElement;
const chipEl = (await chip.element()) as HTMLElement;
const addEl = (await add.element()) as HTMLElement;
expect(allEl.className).toContain('h-11');
expect(chipEl.className).toContain('h-11');
expect(addEl.className).toContain('h-11');
});
});