fix(person-mention): WCAG 1.4.11 contrast for mention pill and dropdown ring
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>
This commit is contained in:
@@ -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}`
|
||||
];
|
||||
|
||||
Reference in New Issue
Block a user