From f1932fd5f62f9e9b7944cf4f0616c25d7ccad7d4 Mon Sep 17 00:00:00 2001
From: Marcel <marcel@familienarchiv>
Date: Wed, 29 Apr 2026 16:19:34 +0200
Subject: [PATCH] fix(person-mention): WCAG 1.4.11 contrast for mention pill
 and dropdown ring
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two non-text-contrast failures, both flagged by Leonie #5621:

1. PersonMentionEditor mention pill: decoration-brand-mint (#A6DAD8) on
   white is ≈1.7:1 — fails the 3:1 minimum for meaningful UI indicators.
   Switch to decoration-ink/50, which matches the read-mode .person-mention
   rule (≈6.4:1) and keeps a unified underline language across modes.

2. MentionDropdown highlighted-row ring: ring-brand-mint on bg-brand-mint/20
   is ≈2.5:1 — same failure class. Switch to ring-brand-navy (≈14.5:1
   against the highlight background) so keyboard-driven selection has a
   clearly visible indicator.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 frontend/src/lib/components/MentionDropdown.svelte     | 5 ++++-
 frontend/src/lib/components/PersonMentionEditor.svelte | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/lib/components/MentionDropdown.svelte b/frontend/src/lib/components/MentionDropdown.svelte
index acfaae49..5090b0bc 100644
--- a/frontend/src/lib/components/MentionDropdown.svelte
+++ b/frontend/src/lib/components/MentionDropdown.svelte
@@ -127,7 +127,10 @@ function selectItem(item: Person) {
 			<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-brand-mint/20 ring-2 ring-brand-mint ring-inset'
+					// brand-mint ring (≈2.5:1 on white) fails WCAG 1.4.11 Non-Text
+					// Contrast for a meaningful keyboard-highlight indicator. brand-navy
+					// gives ~14.5:1 against the bg-brand-mint/20 row. Leonie #5621.
+					i === highlightedIndex && 'bg-brand-mint/20 ring-2 ring-brand-navy ring-inset'
 				]}
 				role="option"
 				aria-selected={i === highlightedIndex}
diff --git a/frontend/src/lib/components/PersonMentionEditor.svelte b/frontend/src/lib/components/PersonMentionEditor.svelte
index 1347f545..81a9f8fd 100644
--- a/frontend/src/lib/components/PersonMentionEditor.svelte
+++ b/frontend/src/lib/components/PersonMentionEditor.svelte
@@ -103,6 +103,9 @@ onMount(() => {
 			}),
 			CustomMention.configure({
 				renderHTML({ node }) {
+					// Underline color matches the read-mode .person-mention rule
+					// (ink at ~50% alpha) — brand-mint on white fails WCAG 1.4.11
+					// Non-Text Contrast (≈1.7:1, needs 3:1). Leonie #5621.
 					return [
 						'span',
 						{
@@ -110,7 +113,7 @@ onMount(() => {
 							'data-person-id': node.attrs.personId,
 							'data-display-name': node.attrs.displayName,
 							class:
-								'mention-token underline decoration-brand-mint underline-offset-2 text-brand-navy font-medium'
+								'mention-token underline decoration-ink/50 underline-offset-2 text-brand-navy font-medium'
 						},
 						`@${node.attrs.displayName}`
 					];