Skip to content

Web tests: preserve the landing terminal’s reduced-motion behaviour #598

Open

Description

@Maxerns

Coverage gap

The landing-page terminal normally reveals its transcript over several seconds and leaves a blinking cursor. Its existing prefers-reduced-motion: reduce rules instead show the complete transcript immediately with no typing or blinking animation, but the browser suite has no reduced-motion check.

Add a small Playwright regression test for this accessibility behaviour. No production defect was found.

Verified behaviour

Checked main 117852ecf8e4d3d0984e0eb93f87d727c4d91214 on macOS arm64 with Node 24.15.0 and Playwright Chromium 149.0.7827.55.

A temporary isolated browser probe rendered the actual Landing component to HTML, loaded the current landing.css, blocked network requests and emulated reduced motion. All 21 terminal line/command/cursor elements had computed animation-name: none, opacity: 1 and clip-path: none. Switching to no-preference restored the normal reveal, typing and cursor animation names.

This verified the component markup and stylesheet together in Chromium. It did not run the production bundle or full funnel setup; the maintained test should cover the real landing page through the existing Playwright suite. The temporary probe was removed. A search of open/closed issues, open PRs and existing web tests found no overlapping reduced-motion task.

Acceptance criteria

  • Add a browser test that sets reducedMotion: "reduce" before visiting / and exercises the real landing page and loaded styles.
  • Assert that the terminal transcript is present, its lines are opaque, and command text is not clipped. Include the final transcript line so an accidentally hidden tail cannot pass.
  • Assert that the terminal's lines, commands and cursor have no CSS animation under reduced motion. A visible cursor alone does not prove blinking is disabled.
  • Check this once the page/styles are ready without sleeping through the normal multi-second timeline or disabling animations globally in the test harness.
  • Include a no-preference control proving the normal terminal animations remain configured. Avoid screenshots or assertions tied to an exact intermediate animation frame.
  • Keep media emulation isolated to the test/context. Confirm the focused test fails when the reduced-motion override is temporarily removed, then restore the stylesheet.

Where to start

  • web/src/styles/landing.css: terminal timeline and the final reduced-motion media query.
  • web/src/Landing.tsx: .term transcript markup.
  • web/e2e/funnel.spec.ts and web/e2e/README.md: existing browser suite and local prerequisites.

Keep this test-only and scoped to the terminal's existing motion behaviour. No redesign, global animation suppression or new browser-test framework is needed. Sign off commits with git commit -s.

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

    good first issueGood for newcomershelp wantedExtra attention is neededtest-coverageMissing or incomplete automated test coverage

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions