feat(ui): P4 无障碍与打磨收尾

- P4-1 对比度:muted-soft 提到 WCAG AA 小字(≥4.5:1)于两主题各面
- P4-3 ConflictCard 原文/建议加 Minus/Plus 图标 + sr-only 标签(不靠颜色)
- P4-4 动效:3 处 chevron transition-transform 加 motion-safe 门控
- P4-5 命令面板 ⌘K 键帽提示 + 键盘操作读数 + 空态引导 + mono 快捷键
- P2-8 SegmentedControl 升级 radiogroup(role=radio/aria-checked + 方向键 roving)
This commit is contained in:
Yaojia Wang
2026-07-11 08:12:36 +02:00
parent 5674158707
commit 45025c36bf
7 changed files with 123 additions and 26 deletions

View File

@@ -1,6 +1,6 @@
"use client";
import { AlertTriangle, CheckCircle2, LocateFixed, Sparkles } from "lucide-react";
import { AlertTriangle, CheckCircle2, LocateFixed, Minus, Plus, Sparkles } from "lucide-react";
import { Badge } from "@/components/ui/Badge";
import { TextInput } from "@/components/ui/TextInput";
@@ -80,10 +80,22 @@ export function ConflictCard({
{conflict.original && conflict.replacement ? (
<div className="mt-2 rounded border border-pass/30 bg-bg/40 px-3 py-1.5 text-xs leading-relaxed">
<span className="mr-1 text-ink-soft"></span>
{/* 非颜色线索Minus/「原文」标签,色盲也可辨(不单靠红色 + 删除线) */}
<Minus
className="mr-0.5 inline-block h-3 w-3 align-[-1px] text-conflict"
aria-hidden="true"
/>
<span className="sr-only"></span>
<span className="text-conflict line-through">{conflict.original}</span>
<span className="mx-1 text-ink-soft" aria-hidden="true">
</span>
{/* 非颜色线索Plus/「建议」标签,色盲也可辨(不单靠绿色) */}
<Plus
className="mr-0.5 inline-block h-3 w-3 align-[-1px] text-pass"
aria-hidden="true"
/>
<span className="sr-only"></span>
<span className="text-pass">{conflict.replacement}</span>
<span className="ml-2 text-ink-soft">稿</span>
</div>