Skip to content

Reduced-motion guards, opt-in terminal screen-reader mode, tooltip upgrade #211

Description

@johannesjo

Problem

Infinite animations lack prefers-reduced-motion guards in the main stylesheet. @keyframes statusPulse drives .status-dot-pulse (1.9 s infinite — potentially on many task dots simultaneously) at styles.css:1413-1424; askcode-pulse (:2263); inline keybind-pulse (HelpDialog.tsx:529-535). styles.css has exactly one reduced-motion block, covering only .projects-collapser (:977-981). The arena CSS files all guard properly — the pattern exists; the main file doesn't use it.

Terminals are silent to screen readers. No screenReaderMode anywhere in src/ — xterm.js ships an off-by-default SR mode, and the app's primary content (agent output) is unreadable by assistive tech. It costs rendering performance, so opt-in via Settings is the right shape.

All 124 tooltips are native title= with no custom tooltip component: ~1 s hover delay, never shown on keyboard focus, unstyled. IconButton funnels through a title prop consistently (which at least provides accessible names), so a single upgrade point exists.

Proposed fix

  • One @media (prefers-reduced-motion: reduce) block disabling the pulse/appear/remove keyframe animations in styles.css.
  • Settings toggle wiring xterm screenReaderMode: true into terminal creation.
  • (Stretch) small custom tooltip shown on hover and :focus-visible; aria-label fallback prop on IconButton.

From a full design/UX audit (2026-07-07); adversarially verified. Line numbers as of b342bbd (v1.12.0).

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or requestuxUX / design improvements

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions