fix: disable hidden homepage tour controls

Author: richiemcilroy

apps/web/__tests__/unit/homepage-demo-accessibility.test.ts

@@ -0,0 +1,34 @@
+import { JSDOM } from "jsdom";
+import { createElement } from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { DesktopDemo } from "@/components/pages/HomeTwo/demo/DesktopDemo";
+
+describe("homepage demo keyboard controls", () => {
+	it("keeps hidden controls inert until the visitor starts the tour", () => {
+		const dom = new JSDOM(renderToStaticMarkup(createElement(DesktopDemo)));
+		try {
+			const buttons = [...dom.window.document.querySelectorAll("button")];
+			for (const label of [
+				"Jump to Instant Mode",
+				"Jump to Studio Mode",
+				"Jump to The Editor",
+				"Skip demo",
+				"Restart demo",
+				"Start recording",
+				"Stop recording",
+				"Export the recording",
+			]) {
+				const button = buttons.find(
+					(candidate) =>
+						(candidate.getAttribute("aria-label") ??
+							candidate.textContent?.trim()) === label,
+				);
+				expect(button, label).toBeDefined();
+				expect(button?.closest("[inert]"), label).not.toBeNull();
+			}
+		} finally {
+			dom.window.close();
+		}
+	});
+});

apps/web/components/pages/HomeTwo/demo/DesktopDemo.tsx

@@ -1417,6 +1417,7 @@ export const DesktopDemo = ({
 
 				{/* Controls: phase pills, tour progress, skip. Hidden until the tour starts. */}
 				<div
+					inert={idle}
 					className={classNames(
 						"relative z-10 mt-3 flex flex-wrap items-center justify-center gap-x-4 gap-y-2 transition-opacity duration-500",
 						idle ? "pointer-events-none opacity-0" : "opacity-100",