peter
d1704a5519
Chrome does not hand the page the Escape it spends on leaving fullscreen (checked with a real
keypress: the first Esc leaves fullscreen, the second closes the player). The guard defended a case
that does not happen, under a comment saying it does. This reverts 121ebeeb.
109 lines
4.3 KiB
TypeScript
109 lines
4.3 KiB
TypeScript
// @vitest-environment jsdom
|
|
//
|
|
// A dialog opened from a player in true fullscreen portals INTO the fullscreen element (a node under
|
|
// <body> is painted beneath it, i.e. invisible). Leaving fullscreen changes that container — and a
|
|
// React portal whose container changes is torn down and recreated, so everything the dialog held went
|
|
// with it: a half-filled download form reset to its defaults and focus fell to <body> (a verifier's
|
|
// side finding in a review).
|
|
import { describe, it, expect, afterEach } from "vitest";
|
|
import { render, cleanup, screen, fireEvent, act } from "@testing-library/react";
|
|
import { vi } from "vitest";
|
|
|
|
vi.mock("react-i18next", async (importOriginal) => {
|
|
const actual = await importOriginal<typeof import("react-i18next")>();
|
|
return { ...actual, useTranslation: () => ({ t: (key: string) => key }) };
|
|
});
|
|
|
|
import Modal from "./Modal";
|
|
|
|
const setFullscreen = (el: Element | null) =>
|
|
act(() => {
|
|
Object.defineProperty(document, "fullscreenElement", { value: el, configurable: true });
|
|
document.dispatchEvent(new Event("fullscreenchange"));
|
|
});
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
setFullscreen(null);
|
|
});
|
|
|
|
describe("a dialog open while fullscreen is left", () => {
|
|
it("keeps what the viewer had typed in it, and the focus inside it", async () => {
|
|
const stage = document.createElement("div");
|
|
document.body.appendChild(stage);
|
|
setFullscreen(stage);
|
|
render(
|
|
<Modal initialFocus="close" title="Download" onClose={() => {}}>
|
|
<input aria-label="name" defaultValue="" />
|
|
</Modal>,
|
|
);
|
|
const field = screen.getByLabelText("name") as HTMLInputElement;
|
|
fireEvent.change(field, { target: { value: "my cut" } });
|
|
field.focus();
|
|
expect(stage.contains(field)).toBe(true);
|
|
|
|
setFullscreen(null); // the browser's own Esc leaves fullscreen; the dialog stays open
|
|
|
|
const after = screen.getByLabelText("name") as HTMLInputElement;
|
|
expect(after.value).toBe("my cut");
|
|
expect(document.activeElement).toBe(after);
|
|
stage.remove();
|
|
});
|
|
});
|
|
|
|
describe("a dialog with an autoFocus child", () => {
|
|
it("opens with the focus in that child, not on the close button", () => {
|
|
// The portal host is created detached and attached by the hook. If it is attached a phase too
|
|
// late (a `useLayoutEffect` instead of `useInsertionEffect`), every descendant's `autoFocus`
|
|
// has already called `.focus()` on a disconnected node — a no-op — and Modal's own fallback
|
|
// then puts the focus on the first focusable in the panel, the header's ✕. That is what the
|
|
// command palette, the download rename dialog and every non-danger confirm shipped with after
|
|
// the first fix (found by a later review).
|
|
render(
|
|
<Modal initialFocus="close" title="Search" onClose={() => {}}>
|
|
<input aria-label="query" autoFocus />
|
|
</Modal>,
|
|
);
|
|
expect(document.activeElement).toBe(screen.getByLabelText("query"));
|
|
});
|
|
|
|
it("still has it after a fullscreen transition moves the host", async () => {
|
|
const stage = document.createElement("div");
|
|
document.body.appendChild(stage);
|
|
render(
|
|
<Modal initialFocus="close" title="Search" onClose={() => {}}>
|
|
<input aria-label="query" autoFocus />
|
|
</Modal>,
|
|
);
|
|
const field = screen.getByLabelText("query");
|
|
expect(document.activeElement).toBe(field);
|
|
|
|
setFullscreen(stage); // the player goes fullscreen under the open dialog
|
|
|
|
expect(stage.contains(field)).toBe(true);
|
|
expect(document.activeElement).toBe(field);
|
|
stage.remove();
|
|
});
|
|
});
|
|
|
|
describe("a dialog whose own content goes fullscreen", () => {
|
|
it("stays where it is and keeps that content", () => {
|
|
// The library player is a <video> inside a dialog, and its fullscreen (the `f` key, or the
|
|
// video's own button) makes that video the fullscreen element. Moving the dialog's host INTO
|
|
// its own descendant is not a move the DOM allows: it threw, and the whole app went to the
|
|
// crash screen.
|
|
render(
|
|
<Modal initialFocus="close" title="Player" onClose={() => {}}>
|
|
<video aria-label="film" />
|
|
</Modal>,
|
|
);
|
|
const video = screen.getByLabelText("film");
|
|
const host = video.closest("body > div");
|
|
|
|
setFullscreen(video);
|
|
|
|
expect(video.isConnected).toBe(true);
|
|
expect(video.closest("body > div")).toBe(host);
|
|
});
|
|
});
|