diff --git a/proof/skill-install-cli-prompt-toggle.png b/proof/skill-install-cli-prompt-toggle.png new file mode 100644 index 00000000..81797f6f Binary files /dev/null and b/proof/skill-install-cli-prompt-toggle.png differ diff --git a/src/__tests__/skill-detail-page.test.tsx b/src/__tests__/skill-detail-page.test.tsx index 0c5e0665..daaf60ff 100644 --- a/src/__tests__/skill-detail-page.test.tsx +++ b/src/__tests__/skill-detail-page.test.tsx @@ -1114,8 +1114,8 @@ describe("SkillDetailPage", () => { expect(screen.getAllByText("@steipete/weather").length).toBeGreaterThan(0); expect(screen.queryByText("npx clawhub@latest install @steipete/weather")).toBeNull(); expect(screen.queryByRole("tab", { name: "ClawHub" })).toBeNull(); - expect(screen.getByRole("tab", { name: "CLI" }).getAttribute("aria-selected")).toBe("true"); - expect(screen.getByRole("tab", { name: "Prompt" })).toBeTruthy(); + expect(screen.getByRole("button", { name: "CLI" }).getAttribute("aria-pressed")).toBe("true"); + expect(screen.getByRole("button", { name: "Prompt" })).toBeTruthy(); expect(screen.queryByText(/After install, inspect the skill metadata/i)).toBeNull(); expect(screen.getAllByText("Security audit").length).toBeGreaterThan(0); expect(screen.getByRole("link", { name: "View Security Audit" }).getAttribute("href")).toBe( diff --git a/src/components/SkillInstallSurface.test.tsx b/src/components/SkillInstallSurface.test.tsx index a4b276f4..760f0509 100644 --- a/src/components/SkillInstallSurface.test.tsx +++ b/src/components/SkillInstallSurface.test.tsx @@ -83,6 +83,7 @@ describe("SkillInstallSurface", () => { , ); + expect(screen.getByRole("heading", { name: "Install" })).toBeTruthy(); expect(screen.getByText("openclaw skills install")).toBeTruthy(); expect(screen.getByText("@steipete/weather")).toBeTruthy(); expect(document.querySelector(".skill-install-command-verb")?.textContent).toBe( @@ -92,8 +93,10 @@ describe("SkillInstallSurface", () => { " @steipete/weather", ); expect(screen.queryByText("npx clawhub@latest install @steipete/weather")).toBeNull(); - expect(screen.getByRole("tab", { name: "CLI" }).getAttribute("aria-selected")).toBe("true"); - expect(screen.getByRole("tab", { name: "Prompt" }).getAttribute("aria-selected")).toBe("false"); + expect(screen.getByRole("button", { name: "CLI" }).getAttribute("aria-pressed")).toBe("true"); + expect(screen.getByRole("button", { name: "Prompt" }).getAttribute("aria-pressed")).toBe( + "false", + ); fireEvent.click(screen.getByRole("button", { name: "Copy OpenClaw CLI command" })); @@ -101,10 +104,12 @@ describe("SkillInstallSurface", () => { expect(writeTextMock).toHaveBeenCalledWith("openclaw skills install @steipete/weather"); }); - fireEvent.click(screen.getByRole("tab", { name: "Prompt" })); + fireEvent.click(screen.getByRole("button", { name: "Prompt" })); expect(screen.getByText(/Install the skill "Weather"/i)).toBeTruthy(); - expect(screen.getByRole("tab", { name: "Prompt" }).getAttribute("aria-selected")).toBe("true"); + expect(screen.getByRole("button", { name: "Prompt" }).getAttribute("aria-pressed")).toBe( + "true", + ); fireEvent.click(screen.getByRole("button", { name: "Copy OpenClaw prompt" })); diff --git a/src/components/SkillInstallSurface.tsx b/src/components/SkillInstallSurface.tsx index f9b45f54..412c35ea 100644 --- a/src/components/SkillInstallSurface.tsx +++ b/src/components/SkillInstallSurface.tsx @@ -192,6 +192,7 @@ export function SkillCommandLineCard({ ownerId, clawdis, }: SkillInstallSurfaceProps) { + const headingId = useId(); const [activeInstallTab, setActiveInstallTab] = useState<"cli" | "prompt">("cli"); const [installTabDirection, setInstallTabDirection] = useState<"left" | "right">("right"); const installTarget = buildSkillInstallTarget(ownerHandle, ownerId, slug); @@ -215,29 +216,24 @@ export function SkillCommandLineCard({ }; return ( -
+
-

Install

-
+

+ Install +

+