Replacing a jQuery slider: controls, motion and lifecycle

Draft fixtures. Expected outcomes below are test instructions, not completed test results. No external requests, dependencies or analytics.

Fixture list and exact steps

  1. P04-F1: controls. Tab to Next; press Enter once. Expect item two and one transition. Activate numeric control 3. Expect item three; focus stays on its control.
  2. P04-F2: rotation. Activate Start rotation, move focus outside the component, wait four seconds. Move pointer into the component or Tab back into it. Expect stopped state; it must not restart by itself. Press Escape after starting to stop.
  3. P04-F3: lifecycle. Activate Destroy. Expect all three items visible and component controls disabled. Activate the surrounding counter. Activate Mount twice, then Next once. Expect one transition, not two.
  4. P04-F4: reduced motion. Enable the simulation checkbox, then Start. Expect refusal. Separately change the OS preference and record the runtime media-query value. The checkbox is not an OS test.

One: define the contract

List the controls, content and callbacks the page actually needs.

Continue after the example

Two: separate the lifetime

One mounted instance owns its listeners and timer.

Continue after the example

Three: keep the exit

A destroyed instance returns this example to readable content.

Continue after the example

Static content; JavaScript has not mounted.

Observation log

Focus: not recorded yet

Ready; no reviewer observations recorded.

Touch, screen-reader announcements and cross-browser behavior require separate observations.