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

a11y(transcription): enlarge @mention magnifier and darken contrast

Browse Source 
Bump h-4 w-4 to h-5 w-5 and text-ink-3 to text-ink-2 so the icon
carries enough visual weight to identify the input region without a
visible text label. Leonie FINDING-MENTION-001 on PR #629.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Marcel
2026-05-19 22:18:42 +02:00
parent 8052131576
commit 94f63c4550
2 changed files with 13 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/lib/shared/discussion/MentionDropdown.svelte
View File

@@ -157,7 +157,7 @@ function selectItem(item: Person) {
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
stroke-width="2" stroke-width="2"
class="h-4 w-4 shrink-0 text-ink-3" class="h-5 w-5 shrink-0 text-ink-2"
> >
<circle cx="11" cy="11" r="7" /> <circle cx="11" cy="11" r="7" />
<path d="m20 20-3.5-3.5" stroke-linecap="round" /> <path d="m20 20-3.5-3.5" stroke-linecap="round" />

12
frontend/src/lib/shared/discussion/MentionDropdown.svelte.test.ts
View File

@@ -154,6 +154,18 @@ describe('MentionDropdown — search input', () => {
expect(input.className).toContain('min-h-[44px]'); expect(input.className).toContain('min-h-[44px]');
}); });
it('renders the magnifier icon at h-5 w-5 with text-ink-2 (Leonie BLOCKER on PR #629)', async () => {
render(MentionDropdown, { props: { model: baseModel() } });
const icon = document.querySelector('[data-test-search-input]')
?.previousElementSibling as SVGElement | null;
expect(icon).not.toBeNull();
expect(icon!.tagName.toLowerCase()).toBe('svg');
expect(icon!.getAttribute('class') ?? '').toContain('h-5');
expect(icon!.getAttribute('class') ?? '').toContain('w-5');
expect(icon!.getAttribute('class') ?? '').toContain('text-ink-2');
});
it('caps the search input at maxlength=100 (CWE-400 amplification — Nora on PR #629)', async () => { it('caps the search input at maxlength=100 (CWE-400 amplification — Nora on PR #629)', async () => {
render(MentionDropdown, { props: { model: baseModel() } }); render(MentionDropdown, { props: { model: baseModel() } });