From 4f2880a61ab13b5be6ac76c4a4f18a2ade5a1fb1 Mon Sep 17 00:00:00 2001 From: Marcel Date: Tue, 19 May 2026 23:28:00 +0200 Subject: [PATCH] a11y(transcription): bump @mention search input to text-base (16 px floor) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The senior-audience body-text floor is 16 px (CLAUDE.md §Dual-Audience). The search input was the smallest non-metadata text in the dropdown at text-sm (14 px), even though it is the primary write surface a 60+ transcriber types into. Bumping to text-base costs ~2 px of popover header height and closes the "I can't read what I'm typing" complaint that historically tops senior-usability tests of search bars. Leonie FINDING-MENTION-006 on PR #629. Co-Authored-By: Claude Opus 4.7 --- .../src/lib/shared/discussion/MentionDropdown.svelte | 2 +- .../lib/shared/discussion/MentionDropdown.svelte.test.ts | 9 +++++++++ 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/shared/discussion/MentionDropdown.svelte b/frontend/src/lib/shared/discussion/MentionDropdown.svelte index a8186ffe..9732df50 100644 --- a/frontend/src/lib/shared/discussion/MentionDropdown.svelte +++ b/frontend/src/lib/shared/discussion/MentionDropdown.svelte @@ -182,7 +182,7 @@ function selectItem(item: Person) { type="search" data-test-search-input maxlength={MAX_QUERY_LENGTH} - class="min-h-[44px] w-full bg-transparent font-sans text-sm text-ink placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-inset" + class="min-h-[44px] w-full bg-transparent font-sans text-base text-ink placeholder:text-ink-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-navy focus-visible:ring-inset" placeholder={m.person_mention_search_prompt()} bind:value={searchQuery} oninput={() => { diff --git a/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts b/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts index adf60496..5ccc85bb 100644 --- a/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts +++ b/frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts @@ -204,6 +204,15 @@ describe('MentionDropdown — search input', () => { expect(listbox.className).toContain('max-w-[calc(100vw-1rem)]'); }); + it('renders the @mention search input at text-base (16 px senior-audience floor — Leonie FINDING-MENTION-006)', async () => { + render(MentionDropdown, { props: { model: baseModel() } }); + + const input = document.querySelector('[data-test-search-input]') as HTMLInputElement; + expect(input).not.toBeNull(); + expect(input.className).toContain('text-base'); + expect(input.className).not.toContain('text-sm'); + }); + it('invokes onSearch with the current value whenever the user types', async () => { const onSearch = vi.fn(); render(MentionDropdown, { props: { model: baseModel(), onSearch } });