feat(terminal): add screen reader buffer and OS accessibility preferences

- Add debounced aria-live region that announces visible terminal text
  to screen readers (500ms throttle, non-empty trimmed rows only)
- Add role=application, aria-label, aria-roledescription to terminal
- Add prefers-reduced-motion listener: disables cursor blink animation
  and sets --terminal-reduce-motion CSS variable
- Add prefers-contrast: more media query with Canvas/CanvasText system
  color fallback
- Add visually hidden .terminal-screen-reader CSS utility
- Mark P7 complete in roadmap
This commit is contained in:
zhangheng
2026-06-25 11:02:47 +08:00
parent 057d74d44c
commit 5bca11083f
3 changed files with 166 additions and 19 deletions

View File

@@ -212,13 +212,23 @@
- ✅ OSC 8 hyperlink 解析:支持 BEL / ST 终止,使用 cell-grid sidecar 记录链接,覆盖写入、常见 CSI 光标移动、清行/清屏、滚屏进 history 后仍能正确映射到链接 hitbox overlay。
- 后续可继续扩展非常规控制序列覆盖面,但 P6 addon parity 的核心能力已完成。
### P7 — Accessibility / 可访问性
### P7 — Accessibility / 可访问性 ✅ 已完成
**计划实现**
1. screen reader buffer / aria-live 策略。
2. keyboard-only selection / copy
3. high contrast / minimum contrast ratio
4. reduced motion 与焦点可见性
**实现**
1. **Screen reader buffer / aria-live**
- 隐藏 `div[aria-live="polite"][role="status"]` 实时推送可见终端文本
- 提取可见行文本(去尾空、过滤空行),每 500ms 防抖更新,避免大量输出时淹没屏幕阅读器
- `role="application"` + `aria-label="Terminal"` + `aria-roledescription="terminal emulator"` 标注终端区域
2. **Keyboard-only selection / copy** ✅(已在 P0 完成)
- `Ctrl-Shift-C` 复制;选区存在时 `Ctrl-C` 优先复制。
- 所有键盘处理通过 IME textarea 的 `on:keydown` 统一入口。
3. **High contrast / minimum contrast ratio**
- 监听 `prefers-contrast: more` 媒体查询,自动切换 `Canvas` / `CanvasText` 系统色。
- CSS `@media (prefers-contrast: more)` 覆盖终端前景/背景/边框。
4. **Reduced motion 与焦点可见性**
- 监听 `prefers-reduced-motion: reduce` 媒体查询,自动禁用光标闪烁动画和过渡。
- JS 侧同步设置 `--terminal-reduce-motion:reduce` CSS 变量Effect 内联动 `prefers_reduced_motion` 信号。
- `terminal-screen:focus-within` 已有可见焦点环(`box-shadow: 0 0 0 3px rgb(56 189 248 / 15%)`)。
### P8 — Unicode / 字形精度