fix: address review feedback - aria-modal, formatJson dedup, overlay close order

This commit is contained in:
lda
2026-07-03 05:38:41 +07:00 Verified
parent a148338199
commit 241897eaa3
7 changed files with 31 additions and 7 deletions
@@ -1,8 +1,7 @@
import type { EvidenceRecord } from "../app/state.js";
import { formatJson } from "./format.js";
import type { PresentationState } from "./presentation-state.js";
const formatJson = (value: unknown): string => JSON.stringify(value, null, 2);
type EvidenceDrawerProps = {
readonly records: readonly EvidenceRecord[];
readonly mode: PresentationState["evidenceMode"];
@@ -19,8 +19,8 @@ export const NodeSpotlight = ({ nodeId, close }: NodeSpotlightProps) => {
const node = presentationNodes.find((candidate) => candidate.id === nodeId);
if (!node) return null;
return (
<aside className="node-spotlight" role="dialog" aria-label={node.label}>
return (
<aside className="node-spotlight" role="dialog" aria-modal="true" aria-label={node.label}>
<button type="button" onClick={close}>Close</button>
<p>NodeUse</p>
<h2>{node.label}</h2>
@@ -1,6 +1,5 @@
import type { DemoEvent } from "../demo/timeline/models.js";
const formatJson = (value: unknown): string => JSON.stringify(value, null, 2);
import { formatJson } from "./format.js";
type OperationBlockProps = {
readonly event: DemoEvent;
@@ -38,4 +38,11 @@ describe("PresentationRoute", () => {
expect(screen.getByRole("dialog", { name: /issue review/i })).toBeInTheDocument();
expect(screen.getByText("NodeUse")).toBeInTheDocument();
});
it("can advance replay far enough to show a product operation block", async () => {
render(<PresentationRoute />);
await userEvent.click(screen.getByRole("button", { name: /product operation/i }));
expect(await screen.findByText(/workflow.runs.start/i)).toBeInTheDocument();
});
});
@@ -0,0 +1 @@
export const formatJson = (value: unknown): string => JSON.stringify(value, null, 2);
@@ -34,4 +34,22 @@ describe("presentationReducer", () => {
expect(closed.evidenceMode).toBe("hidden");
expect(closed.beat).toBe("intro");
});
it("closes node spotlight before evidence drawer", () => {
const withNode = presentationReducer(initialPresentationState, {
type: "select_node",
nodeId: "review_issues",
});
const withEvidence = presentationReducer(withNode, {
type: "set_evidence_mode",
mode: "open",
});
expect(withEvidence.selectedNodeId).toBe("review_issues");
expect(withEvidence.evidenceMode).toBe("open");
const afterEscape = presentationReducer(withEvidence, { type: "close_overlay" });
expect(afterEscape.selectedNodeId).toBeNull();
expect(afterEscape.evidenceMode).toBe("open");
});
});
@@ -61,8 +61,8 @@ export const presentationReducer = (
case "set_evidence_mode":
return { ...state, evidenceMode: action.mode };
case "close_overlay":
if (state.evidenceMode !== "hidden") return { ...state, evidenceMode: "hidden" };
if (state.selectedNodeId !== null) return { ...state, selectedNodeId: null };
if (state.evidenceMode !== "hidden") return { ...state, evidenceMode: "hidden" };
return state;
case "set_playback_mode":
return { ...state, playbackMode: action.mode };