marcel/familienarchiv
1
0
Fork 0
Code Issues 125 Pull Requests 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

6
frontend/src/routes/geschichten/+page.svelte
View File

@@ -70,7 +70,7 @@ function publishedAt(g: { publishedAt?: string }): string | null {
type="button"
aria-pressed={!hasFilters}
onclick={clearAll}
class="inline-flex h-9 items-center rounded-full border border-line px-3 font-sans text-xs font-bold tracking-wider text-ink-2 uppercase hover:bg-muted aria-pressed:bg-ink aria-pressed:text-primary-fg"
class="inline-flex h-11 items-center rounded-full border border-line px-3 font-sans text-xs font-bold tracking-wider text-ink-2 uppercase hover:bg-muted aria-pressed:bg-ink aria-pressed:text-primary-fg"
>
{m.geschichten_filter_all_pill()}
</button>
@@ -81,7 +81,7 @@ function publishedAt(g: { publishedAt?: string }): string | null {
aria-pressed="true"
aria-label={m.geschichten_filter_remove_chip({ name: p.displayName })}
onclick={() => removePerson(p.id!)}
class="inline-flex h-9 items-center gap-2 rounded-full bg-ink px-3 font-sans text-xs font-bold tracking-wider text-primary-fg uppercase"
class="inline-flex h-11 items-center gap-2 rounded-full bg-ink px-3 font-sans text-xs font-bold tracking-wider text-primary-fg uppercase"
>
{p.displayName}
<span aria-hidden="true">×</span>
@@ -92,7 +92,7 @@ function publishedAt(g: { publishedAt?: string }): string | null {
type="button"
aria-expanded={showPersonPicker}
onclick={() => (showPersonPicker = !showPersonPicker)}
class="inline-flex h-9 items-center rounded-full border border-line px-3 font-sans text-xs font-bold tracking-wider text-ink-2 uppercase hover:bg-muted"
class="inline-flex h-11 items-center rounded-full border border-line px-3 font-sans text-xs font-bold tracking-wider text-ink-2 uppercase hover:bg-muted"
>
+ {m.geschichten_filter_choose_person()}
</button>

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');
});
});