| @@ -0,0 +1,59 @@ |
| | 1 | import { expect } from "@effect/vitest"; |
| | 2 | import { Effect } from "effect"; |
| | 3 | |
| | 4 | import { scenario } from "../src/scenario"; |
| | 5 | import { Browser, Target } from "../src/services"; |
| | 6 | import { visit } from "../src/surfaces/browser"; |
| | 7 | |
| | 8 | scenario( |
| | 9 | "Accessibility · reduced motion removes dialog animation and control transitions", |
| | 10 | {}, |
| | 11 | Effect.gen(function* () { |
| | 12 | const target = yield* Target; |
| | 13 | const browser = yield* Browser; |
| | 14 | const identity = yield* target.newIdentity(); |
| | 15 | |
| | 16 | yield* browser.session(identity, async ({ page, step }) => { |
| | 17 | await step("Open the API key dialog with normal motion", async () => { |
| | 18 | await page.emulateMedia({ reducedMotion: "no-preference" }); |
| | 19 | await visit(page, "/api-keys"); |
| | 20 | await page.getByRole("button", { name: "New key" }).click(); |
| | 21 | await page.getByRole("dialog").waitFor(); |
| | 22 | const duration = await page |
| | 23 | .getByRole("dialog") |
| | 24 | .evaluate((element) => Number.parseFloat(getComputedStyle(element).transitionDuration)); |
| | 25 | expect(duration, "normal motion retains the dialog transition").toBeGreaterThan(0.00001); |
| | 26 | }); |
| | 27 | |
| | 28 | await step("Enable reduced motion while the dialog is open", async () => { |
| | 29 | await page.emulateMedia({ reducedMotion: "reduce" }); |
| | 30 | const styles = await page.getByRole("dialog").evaluate((element) => { |
| | 31 | const style = getComputedStyle(element); |
| | 32 | return { |
| | 33 | animation: Number.parseFloat(style.animationDuration), |
| | 34 | iterations: style.animationIterationCount, |
| | 35 | transition: Number.parseFloat(style.transitionDuration), |
| | 36 | scroll: style.scrollBehavior, |
| | 37 | }; |
| | 38 | }); |
| | 39 | expect(styles).toEqual({ |
| | 40 | animation: 0.00001, |
| | 41 | iterations: "1", |
| | 42 | transition: 0.00001, |
| | 43 | scroll: "auto", |
| | 44 | }); |
| | 45 | await page.locator("#create-key-name").fill("Reduced motion check"); |
| | 46 | expect(await page.locator("#create-key-name").inputValue()).toBe("Reduced motion check"); |
| | 47 | }); |
| | 48 | |
| | 49 | await step("Restore normal motion without losing the form", async () => { |
| | 50 | await page.emulateMedia({ reducedMotion: "no-preference" }); |
| | 51 | expect(await page.locator("#create-key-name").inputValue()).toBe("Reduced motion check"); |
| | 52 | const duration = await page |
| | 53 | .getByRole("dialog") |
| | 54 | .evaluate((element) => Number.parseFloat(getComputedStyle(element).transitionDuration)); |
| | 55 | expect(duration).toBeGreaterThan(0.00001); |
| | 56 | }); |
| | 57 | }); |
| | 58 | }), |
| | 59 | ); |