fix(frontend): raise dark contrast, expand hit areas, and surface input limits
Independent Staging Quality Gate / validate (push) Successful in 9m19s
Independent Staging Quality Gate / publish (push) Successful in 9m54s

Dark muted surfaces missed WCAG AA; action and tertiary tokens plus a 32-pair contract close that. Hit targets, remaining-count, and Enter-to-send follow the interaction audit without changing visual sizes.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Jesse_Chen
2026-08-30 11:19:00 +08:00
parent b43808b016
commit e8fa1ce4ea
20 changed files with 555 additions and 40 deletions
+63
View File
@@ -6815,3 +6815,66 @@
- 复发自:BUG-414
- 修复版本:待发布
## BUG-445 | 深色主题次要字色与行动色在卡片底上对比度不足 4.5:1
- 状态:resolved
- 首次发现:2026-08-30
- 最近更新:2026-08-30
- 影响面:深色主题 token、围栏代码块语言标签、根边界页行动色
- 用户现象:深色模式下卡片底上的次要说明文字和黏土橙行动色发灰发糊,代码块语言标签是其中一处已上线的实例。
- 触发条件:系统偏好或账户菜单选择深色;任何把 `ink-tertiary``action` 画在 `canvas-muted` 上的界面。
- 根因:对比度合同只验了字色对阅读面 `--color-canvas`,漏掉了卡片底 `--color-canvas-muted`。实测 `--color-ink-tertiary` `#928e84``#30302d` 为 4.05:1`--color-action` `#d4785a` 为 4.18:1,均低于 WCAG AA 4.5:1。
- 修复:两个深色块把 `--color-ink-tertiary` 改为 `#9c988e``--color-action` / `--color-focus` / `--report-accent` 改为 `#d78064`(色相 15°、饱和度不变,只提亮明度)。四个根边界页内联 token 与 `DESIGN.md` 对照表同步,清掉 `#d4785a`
- 验证:`frontend/tests/dark-theme-contract.test.ts` 把对比度断言扩成 8 种字色 × 4 种底色,失败信息打印具体配对和比值;反向把 tertiary 改回 `#928e84` 后该测试变红。
- 防复发:新增字色或底色 token 时必须进入这张 32 组矩阵,不得只验阅读面;不得靠放宽 4.5 阈值让测试通过。
- 相关记录:无
- 复发自:无
- 修复版本:待发布
## BUG-446 | 回答操作等控件热区小于文档承诺的 44px
- 状态:resolved
- 首次发现:2026-08-30
- 最近更新:2026-08-30
- 影响面:回答下方赞/踩/复制/重新生成、侧栏星盘 chip、登录页链接按钮、模型选择项、生时跳过、报告中心章节按钮
- 用户现象:回答下方四个图标按钮只有 26×26px 且没有 padding,很难点准;若干列表项和链接也低于 44px。
- 触发条件:任意一条助手回答下方的操作行;侧栏星盘 chip;登录页链接;onboarding 下拉;报告中心章节操作。
- 根因:`DESIGN.md` 写了 44px,样式却把高频图标做成 26px/`padding: 0`chip 32px,若干文字按钮 40px。
- 修复:视觉尺寸不动。图标行与 chip、登录链接用透明伪元素扩大热区。选择项、跳过、报告章节按钮把 `min-height` 提到 44px。回答操作四个按钮中心距只有 27px、下方 follow-up 只有 8px 边距,44×44 会互相吃点击,热区停在不重叠的 27×34;chip 与登录链接因 8px 间距停在 40px。见 `BLOCKED.md`
- 验证:`frontend/tests/touch-target-contract.test.ts` 锁 26px 视觉、伪元素尺寸、以及三处 `min-height >= 44`。改前改后截图对比视觉尺寸。
- 防复发:新增可点元素必须满足 44px 命中区;视觉小于 44px 时用伪元素补,且扩大后的热区不得与相邻可点元素重叠。
- 相关记录:无
- 复发自:无
- 修复版本:待发布
## BUG-447 | 字数上限只有 maxLength,到顶后界面毫无反应
- 状态:resolved
- 首次发现:2026-08-30
- 最近更新:2026-08-30
- 影响面:主对话输入框、姓名输入、生时引导经历框、选择题补充说明
- 用户现象:打到字数上限后键盘像失灵,没有提示说明已经到顶。
- 触发条件:主输入写满 500 字(入门称呼为 80)、姓名 80、引导经历 500、补充说明 240。
- 根因:四处只有 `maxLength`,没有接近上限时的可见反馈,也没有 `aria-describedby`
- 修复:剩余字数进入阈值(500→50,短输入按 10% 且不低于 8)才挂载计数;平时不显示。计数用 `ink-tertiary`,到顶转 `danger``aria-live="polite"``aria-atomic="true"`,可见数字不进 live 文本,避免每字播报。主输入计数放进已有 `.composer-footer`,不新造一层把输入框顶高。
- 验证:`frontend/tests/character-remaining-contract.test.ts` 锁阈值、两句 live 文案、四处 `aria-describedby` 接线。
- 防复发:带 `maxLength` 的产品输入必须在阈值内给出计数,并只在阈值内挂载 live region。
- 相关记录:无
- 复发自:无
- 修复版本:待发布
## BUG-448 | 生时引导框用 ⌘/Ctrl+Enter 发送且没有任何说明
- 状态:resolved
- 首次发现:2026-08-30
- 最近更新:2026-08-30
- 影响面:`birth-time-guide-turn` 经历输入框
- 用户现象:主对话和生时校正对话都是 Enter 发送,到引导框按 Enter 只会换行,界面没有任何键位说明。
- 触发条件:生时引导流程里在「说说这段经历」多行框按 Enter。
- 根因:该框绑定了修饰键发送,且未处理 `isComposing`;另外两处已经是 Enter 发送并忽略组字中的 Enter。
- 修复:统一为 Enter 发送、Shift+Enter 换行,并加上 `!event.nativeEvent.isComposing`。保留「整理为经历草稿」按钮。在既有 `#birth-time-guide-hint` 补一句键位说明。选择统一发送键而不是只补提示,是因为用户已在另外两处养成 Enter 习惯,漏掉 `isComposing` 会让中文选词误发送。
- 验证:`frontend/tests/composer-ime-contract.test.ts` 锁三处 `onKeyDown` 都判断 `isComposing`,引导框不再看 `metaKey`/`ctrlKey`
- 防复发:产品内多行发送框必须同一套 Enter / Shift+Enter / `isComposing` 合同;新的输入框不得只改发送键不处理组字。
- 相关记录:无
- 复发自:无
- 修复版本:待发布