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

@@ -804,6 +804,20 @@
background: rgb(125 211 252 / 14%);
}
/* Screen-reader-only announcement region (visually hidden, accessible to AT). */
.terminal-screen-reader {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.terminal-measure {
position: absolute;
left: -9999px;
@@ -844,6 +858,36 @@
color: var(--cowa-text-primary);
line-height: 24px;
}
/* Accessibility: respect OS-level motion preference. */
@media (prefers-reduced-motion: reduce) {
.terminal-cursor {
animation: none !important;
}
.terminal-screen,
.terminal-ime {
transition: none !important;
}
}
/* Accessibility: respect OS-level contrast preference. */
@media (prefers-contrast: more) {
.terminal-screen {
background: Canvas !important;
color: CanvasText !important;
border-color: CanvasText !important;
}
.terminal-text {
color: CanvasText !important;
}
.terminal-segment {
color: CanvasText !important;
}
.terminal-badge {
border: 1px solid CanvasText;
}
}
.cowa-page-heading p {
@apply m-0 pt-1 text-sm;