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

fix(person-mention): distinguish keyboard-highlighted row from hover

Browse Source 
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>
This commit is contained in:
Marcel
2026-04-29 01:13:27 +02:00
parent a8a3b7f574
commit 780c682136
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/lib/components/PersonMentionEditor.svelte
View File

@@ -215,7 +215,12 @@ const popupOpen = $derived(query !== null);
<div <div
class={[ class={[
'flex min-h-[44px] cursor-pointer flex-col gap-1 px-3 py-2.5 text-left hover:bg-canvas', '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" role="option"
aria-selected={i === highlightedIndex} aria-selected={i === highlightedIndex}