Skip to content

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

Open

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).

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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