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:
@@ -41,7 +41,8 @@ describe("Toaster — one host shows the toasts", () => {
|
||||
expect(screen.getByTestId("app").textContent).not.toContain("Couldn't remove the video.");
|
||||
// Both live regions stay mounted — a polite region has to pre-exist to be announced.
|
||||
expect(hosts()).toHaveLength(2);
|
||||
expect(hosts().map((h) => h.getAttribute("aria-live"))).toEqual(["off", "polite"]);
|
||||
// The taking-over host arms itself a task later (see the "inherits" test below).
|
||||
expect(hosts().map((h) => h.getAttribute("aria-live"))).toEqual(["off", "off"]);
|
||||
|
||||
overlay.unmount();
|
||||
expect(screen.getByTestId("app").textContent).toContain("Couldn't remove the video.");
|
||||
@@ -74,6 +75,47 @@ describe("Toaster — handing the toasts to another host", () => {
|
||||
expect(screen.getByText("fresh").closest(".toast-card")!.getAttribute("role")).toBe("alert");
|
||||
});
|
||||
|
||||
it("keeps its live region off while the inherited toasts go in, and arms it a task later", async () => {
|
||||
// The other half of "silently": a region that is already polite when the inherited nodes are
|
||||
// inserted announces them anyway. React flushes effects in the SAME task as that render, so the
|
||||
// arming has to wait for the next one — a screen reader reads the region's state after the task.
|
||||
render(<Toaster />);
|
||||
act(() => void notify({ level: "info", message: "saved" }));
|
||||
const overlay = render(<Toaster overlay />);
|
||||
const region = overlay.container.firstElementChild!;
|
||||
expect(region.textContent).toContain("saved"); // it took the toast over…
|
||||
expect(region.getAttribute("aria-live")).toBe("off"); // …while still off
|
||||
await act(async () => void (await new Promise((r) => setTimeout(r, 0))));
|
||||
expect(region.getAttribute("aria-live")).toBe("polite"); // and polite for what comes next
|
||||
});
|
||||
|
||||
it("ranks hosts by when their OVERLAY opened, not by when the host mounted", async () => {
|
||||
// PlayerModal's host moves into the fullscreen stage and back: remounted, it used to jump over a
|
||||
// dialog opened above the player, and the toasts went back under that dialog's scrim.
|
||||
const player = render(
|
||||
<div data-testid="player">
|
||||
<Toaster overlay order={1} />
|
||||
</div>,
|
||||
);
|
||||
render(
|
||||
<div data-testid="dialog">
|
||||
<Toaster overlay order={2} />
|
||||
</div>,
|
||||
);
|
||||
act(() => void notify({ level: "error", message: "boom" }));
|
||||
expect(screen.getByTestId("dialog").textContent).toContain("boom");
|
||||
// The player swaps its host (leaving true fullscreen) while the dialog stays open.
|
||||
player.rerender(
|
||||
<div data-testid="player">
|
||||
<span />
|
||||
<Toaster overlay order={1} />
|
||||
</div>,
|
||||
);
|
||||
await act(async () => void (await new Promise((r) => setTimeout(r, 0))));
|
||||
expect(screen.getByTestId("dialog").textContent).toContain("boom");
|
||||
expect(screen.getByTestId("player").textContent).not.toContain("boom");
|
||||
});
|
||||
|
||||
it("keeps the countdown where it was, instead of starting it again from full", () => {
|
||||
// The bar is a CSS animation on the node; the dismiss timer was armed once, at notify time. A
|
||||
// new node restarted the bar, and the toast vanished with it still two-thirds full.
|
||||
|
||||
Reference in New Issue
Block a user