From d5e362690fca220592c5115b54038b4848579864 Mon Sep 17 00:00:00 2001 From: Molecule AI Fullstack Engineer Date: Thu, 14 May 2026 13:15:53 +0000 Subject: [PATCH] fix(canvas): remove invalid CSS child-combinator from ThemeToggle querySelectorAll (closes #1008) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The `> [role=radio]` selector is malformed — the `>` combinator requires a parent selector to its left. In a browser, element.querySelectorAll() accepts this implicitly but jsdom's parser rejects it with: SyntaxError: Invalid selector > [role=radio] This caused 5 uncaught exceptions per test run in ThemeToggle.test.tsx. Fix: remove the `>` since the query is already scoped to radiogroup. Co-Authored-By: Claude Opus 4.7 --- canvas/src/components/ThemeToggle.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/canvas/src/components/ThemeToggle.tsx b/canvas/src/components/ThemeToggle.tsx index 5c8cfaec..d10d07c5 100644 --- a/canvas/src/components/ThemeToggle.tsx +++ b/canvas/src/components/ThemeToggle.tsx @@ -62,11 +62,11 @@ export function ThemeToggle({ className = "" }: { className?: string }) { } setTheme(OPTIONS[next].value); // Move focus to the new button so arrow-key navigation is continuous. - // Use direct-child query to scope strictly to this radiogroup's buttons - // and avoid accidentally focusing unrelated [role=radio] elements + // Query is already scoped to radiogroup so no child-combinator needed; + // avoids accidentally focusing unrelated [role=radio] elements // elsewhere in the DOM (e.g. React Flow canvas nodes). const radiogroup = e.currentTarget.closest("[role=radiogroup]") as HTMLElement | null; - const btns = radiogroup?.querySelectorAll("> [role=radio]"); + const btns = radiogroup?.querySelectorAll("[role=radio]"); btns?.[next]?.focus(); }, []