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:
@@ -16,24 +16,48 @@ export const LEVEL_STYLE: Record<NotifLevel, { icon: typeof Info; color: string;
|
||||
// context (its `@container` implies layout containment) — so anything portalled to <body> at the
|
||||
// same z-overlay painted over every toast: a failure raised while watching was drawn under an 80%
|
||||
// black, blurred scrim, and a click on it closed the player. So every full-screen overlay mounts its
|
||||
// OWN `<Toaster overlay />` inside itself — ui/Modal does it for every dialog, the players for
|
||||
// themselves — and exactly one host shows the toasts: the most recently mounted overlay, else the
|
||||
// app's. Same component, same look — and inside the overlay's aria-modal dialog, where a screen
|
||||
// OWN `<Toaster overlay order={…} />` inside itself — ui/Modal does it for every dialog, the players
|
||||
// for themselves — and exactly one host shows the toasts: the one of the overlay OPENED last, else
|
||||
// the app's. Same component, same look — and inside the overlay's aria-modal dialog, where a screen
|
||||
// reader can still reach it.
|
||||
const overlayHosts = createStore<readonly string[]>([]);
|
||||
//
|
||||
// "Opened last", not "host mounted last": a host can remount while its overlay stays open —
|
||||
// PlayerModal's moves into the fullscreen stage and back — and ranked by mount time it came back on
|
||||
// top of a dialog opened over the player (the download dialog after leaving true fullscreen), so the
|
||||
// toasts were drawn under that dialog's scrim again (deep-review round 4). So the OVERLAY takes its
|
||||
// rank once, when it opens (`useOverlayOrder`), and hands it to every host it renders.
|
||||
let overlaySeq = 0;
|
||||
/** This overlay's rank among open overlays — taken once, when it mounts. Call it in the overlay
|
||||
* itself, never in a component that can remount while the overlay stays open. */
|
||||
export function useOverlayOrder(): number {
|
||||
const [order] = useState(() => ++overlaySeq);
|
||||
return order;
|
||||
}
|
||||
type Host = { id: string; order: number };
|
||||
const overlayHosts = createStore<readonly Host[]>([]);
|
||||
const topHost = () => {
|
||||
const hosts = overlayHosts.get();
|
||||
return hosts[hosts.length - 1] ?? null;
|
||||
let top: Host | null = null;
|
||||
for (const h of overlayHosts.get()) if (!top || h.order >= top.order) top = h;
|
||||
return top?.id ?? null;
|
||||
};
|
||||
|
||||
export default function Toaster({ overlay = false }: { overlay?: boolean }) {
|
||||
export default function Toaster({
|
||||
overlay = false,
|
||||
order,
|
||||
}: {
|
||||
overlay?: boolean;
|
||||
/** The owning overlay's `useOverlayOrder()`. Without one, the host ranks by its own mount. */
|
||||
order?: number;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const id = useId();
|
||||
const ownOrder = useOverlayOrder();
|
||||
const rank = order ?? ownOrder;
|
||||
useEffect(() => {
|
||||
if (!overlay) return;
|
||||
overlayHosts.set((hosts) => [...hosts, id]);
|
||||
return () => overlayHosts.set((hosts) => hosts.filter((h) => h !== id));
|
||||
}, [overlay, id]);
|
||||
overlayHosts.set((hosts) => [...hosts, { id, order: rank }]);
|
||||
return () => overlayHosts.set((hosts) => hosts.filter((h) => h.id !== id));
|
||||
}, [overlay, id, rank]);
|
||||
const top = useSyncExternalStore(overlayHosts.subscribe, topHost, topHost);
|
||||
const active = useSyncExternalStore(subscribe, getActiveToasts, getActiveToasts);
|
||||
const isTop = top === (overlay ? id : null);
|
||||
@@ -41,14 +65,23 @@ export default function Toaster({ overlay = false }: { overlay?: boolean }) {
|
||||
// A host that takes over (an overlay opening, or the app's own once it closes) receives the toasts
|
||||
// that were already up as NEW nodes — and a screen reader announced every one of them again, an
|
||||
// error assertively. So the ones it inherits are shown silently: no `role="alert"`, and the region
|
||||
// stays `aria-live="off"` until they are in, turning polite (for the toasts that come after) once
|
||||
// they have been rendered.
|
||||
// stays `aria-live="off"` until they are in, turning polite (for the toasts that come after) in a
|
||||
// LATER task. Not in an effect: React flushes those in the same task as the render that inserted the
|
||||
// toasts, and a screen reader reads the region's state after the task — by which time it was polite
|
||||
// again, i.e. the arming did nothing.
|
||||
const inherited = useMemo(
|
||||
() => new Set(isTop ? getActiveToasts().map((n) => n.id) : []),
|
||||
[isTop],
|
||||
);
|
||||
const [armed, setArmed] = useState(false);
|
||||
useEffect(() => setArmed(isTop), [isTop]);
|
||||
useEffect(() => {
|
||||
if (!isTop) {
|
||||
setArmed(false);
|
||||
return;
|
||||
}
|
||||
const timer = window.setTimeout(() => setArmed(true), 0);
|
||||
return () => window.clearTimeout(timer);
|
||||
}, [isTop]);
|
||||
|
||||
return (
|
||||
// Stable, always-mounted live region — a polite region must PRE-EXIST in the DOM for a screen
|
||||
|
||||
Reference in New Issue
Block a user