From 780c682136983d2ede254a49cc0e6e4a2ae899ef Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 29 Apr 2026 01:13:27 +0200
Subject: [PATCH] fix(person-mention): distinguish keyboard-highlighted row
 from hover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Leonie #5507 concern 3: hover and aria-selected both used bg-canvas, so
a tablet user sweeping the trackpad couldn't tell where the keyboard
cursor was. Use bg-brand-mint/20 + a 2px ring-inset for the highlighted
row — keeps hover affordance, adds a distinct keyboard-cursor token
that meets WCAG 1.4.11 Non-Text Contrast.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/lib/components/PersonMentionEditor.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/lib/components/PersonMentionEditor.svelte b/frontend/src/lib/components/PersonMentionEditor.svelte
index 1f25fc80..ebbf49d0 100644
--- a/frontend/src/lib/components/PersonMentionEditor.svelte
+++ b/frontend/src/lib/components/PersonMentionEditor.svelte
@@ -215,7 +215,12 @@ const popupOpen = $derived(query !== null);
 					<div
 						class={[
 							'flex min-h-[44px] cursor-pointer flex-col gap-1 px-3 py-2.5 text-left hover:bg-canvas',
-							i === highlightedIndex && 'bg-canvas'
+							// Keyboard-highlighted row gets a stronger token than hover so
+							// keyboard users (and tablet stylus users sweeping over rows)
+							// can tell the cursor position apart from a hover (Leonie #5507 §3,
+							// WCAG 1.4.11 Non-Text Contrast).
+							i === highlightedIndex &&
+								'bg-brand-mint/20 ring-2 ring-brand-mint ring-inset'
 						]}
 						role="option"
 						aria-selected={i === highlightedIndex}