fix(ui): a toast host ranks by when its overlay opened, and an overlay keeps its Escape, its dialog and its navigation straight
Deep-review round 4, the overlays. - Toast hosts were ranked by mount time, and PlayerModal swaps its host on every fullscreen change: leaving true fullscreen with the download dialog open put the player's host back on top, so toasts were drawn under that dialog's scrim and a click on one closed the dialog. Each overlay takes a rank once, when it opens (`useOverlayOrder`), and hands it to every host it renders. - A dialog open while fullscreen is left keeps a stable portal container (moved, not re-created): React tore the portal down when `fsRoot` changed, resetting a half-filled form and dropping focus to <body>. Focus is put back after the move. - The onboarding wizard is a layer, not a raw document listener: one Escape used to dismiss the error dialog over it AND end onboarding, skipping the write-scope step. - `navigateTo` (a toast's "View", clicked inside the player's own host) goes over the overlays it unmounts, so the player's Back-to-close cleanup no longer pops the page it just opened — the same fix Shift+W already had. The access-requests toast action too. - The live region arms itself a task after it takes over inherited toasts: React flushes effects in the same task as that render, so the "silent inheritance" arming was a no-op. - The overlay-host guard matches class tokens in any order (PlexPlayer's root was never checked), globs `ui/` too (ui/Modal was not checked either), and requires the rank.
This commit is contained in:
@@ -0,0 +1,52 @@
|
||||
// @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 deep-review round 4).
|
||||
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);
|
||||
await setFullscreen(stage);
|
||||
render(
|
||||
<Modal 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);
|
||||
|
||||
await 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();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user