From 32de2819df817b2846b880930d6da6c29ce781a9 Mon Sep 17 00:00:00 2001
From: asepharyana <asepharyana@users.noreply.github.com>
Date: Mon, 24 Aug 2026 15:47:19 +0700
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20a11y=20constellation=20mirror?=
 =?UTF-8?q?=20=E2=80=94=20sr/keyboard-accessible=20node=20list?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/shell/constellation-frame.tsx  |  2 +
 .../components/shell/scene-a11y-mirror.tsx    | 55 +++++++++++++++++++
 2 files changed, 57 insertions(+)
 create mode 100644 services/frontend/src/components/shell/scene-a11y-mirror.tsx

diff --git a/services/frontend/src/components/shell/constellation-frame.tsx b/services/frontend/src/components/shell/constellation-frame.tsx
index 28ef1e73..4e4f5909 100644
--- a/services/frontend/src/components/shell/constellation-frame.tsx
+++ b/services/frontend/src/components/shell/constellation-frame.tsx
@@ -18,6 +18,7 @@ import {
   resolveScene,
   type SceneSeed,
 } from "@/components/shell/route-scenes";
+import { SceneA11yMirror } from "@/components/shell/scene-a11y-mirror";
 import {
   SceneGraphProvider,
   useSceneGraph,
@@ -62,6 +63,7 @@ export function ConstellationFrame({
       <div className="relative h-dvh w-full overflow-hidden">
         <StageFromContext seed={sceneSeed} />
         <FloatingChrome />
+        <SceneA11yMirror />
         <MiniPlayer />
         {/* Overlay content region — scenes place floating panels inside. */}
         <main className="pointer-events-none absolute inset-0 z-10 overflow-y-auto overscroll-contain">
diff --git a/services/frontend/src/components/shell/scene-a11y-mirror.tsx b/services/frontend/src/components/shell/scene-a11y-mirror.tsx
new file mode 100644
index 00000000..05391e7e
--- /dev/null
+++ b/services/frontend/src/components/shell/scene-a11y-mirror.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+/**
+ * SceneA11yMirror — screen-reader/keyboard mirror of the live constellation.
+ * The canvas itself is decorative (aria-hidden); this list exposes every
+ * node as a real link/button so keyboard and AT users get the same graph.
+ */
+import { usePathname } from "next/navigation";
+import { useSceneGraph } from "@/components/shell/scene-graph-context";
+
+export function SceneA11yMirror() {
+  const pathname = usePathname() ?? "/";
+  const { state, setFocus } = useSceneGraph();
+  const nodes = state?.graph.nodes ?? [];
+
+  return (
+    <nav
+      aria-label={`${pathname} constellation map`}
+      className="sr-only focus-within:not-sr-only focus-within:absolute focus-within:left-5 focus-within:top-16 focus-within:z-40 focus-within:max-w-sm focus-within:rounded-2xl focus-within:border focus-within:border-[var(--color-hairline)] focus-within:bg-[var(--color-canvas-2)]/95 focus-within:p-3 focus-within:backdrop-blur-xl"
+    >
+      <p className="mb-1 font-mono text-xs text-[var(--color-ink-faint)]">
+        constellation — {nodes.length} node
+      </p>
+      <ul className="space-y-1">
+        {nodes.map((n) => (
+          <li key={n.id}>
+            {n.href ? (
+              <a
+                href={n.href}
+                className="rounded-lg px-2 py-1 font-mono text-sm text-[var(--color-ink)] outline-none hover:bg-white/5 focus-visible:ring-2 focus-visible:ring-[var(--color-ring)]"
+              >
+                {n.label} ({n.kind})
+              </a>
+            ) : (
+              <button
+                type="button"
+                onClick={() =>
+                  setFocus((prev) => (prev === n.id ? null : n.id))
+                }
+                className="w-full rounded-lg px-2 py-1 text-left font-mono text-sm text-[var(--color-ink)] outline-none hover:bg-white/5 focus-visible:ring-2 focus-visible:ring-[var(--color-ring)]"
+              >
+                {n.label} ({n.kind})
+              </button>
+            )}
+          </li>
+        ))}
+        {nodes.length === 0 ? (
+          <li className="px-2 py-1 font-mono text-sm text-[var(--color-ink-faint)]">
+            tidak ada node aktif
+          </li>
+        ) : null}
+      </ul>
+    </nav>
+  );
+}