fix(canvas/ThemeToggle): replace querySelectorAll with Array.from children approach #1017
Merged
devops-engineer
merged 1 commits from 2026-05-14 15:07:37 +00:00
design/themetoggle-test-teardown-fix into main
1 Commits
| Author | SHA1 | Message | Date | |
|---|---|---|---|---|
| 20241de570 |
fix(canvas/ThemeToggle): resolve 5 pre-existing INDEX_SIZE_ERR test errors
Some checks failed
Block internal-flavored paths / Block forbidden paths (pull_request) Successful in 9s
CI / Detect changes (pull_request) Successful in 26s
E2E API Smoke Test / detect-changes (pull_request) Successful in 26s
Harness Replays / detect-changes (pull_request) Successful in 13s
E2E Staging Canvas (Playwright) / detect-changes (pull_request) Successful in 37s
Handlers Postgres Integration / detect-changes (pull_request) Successful in 33s
Secret scan / Scan diff for credential-shaped strings (pull_request) Successful in 16s
Runtime PR-Built Compatibility / detect-changes (pull_request) Successful in 30s
security-review / approved (pull_request) Failing after 19s
qa-review / approved (pull_request) Successful in 20s
gate-check-v3 / gate-check (pull_request) Failing after 23s
sop-tier-check / tier-check (pull_request) Successful in 14s
lint-required-no-paths / lint-required-no-paths (pull_request) Successful in 1m18s
CI / Platform (Go) (pull_request) Successful in 12s
CI / Shellcheck (E2E scripts) (pull_request) Successful in 22s
CI / Python Lint & Test (pull_request) Successful in 21s
Harness Replays / Harness Replays (pull_request) Successful in 7s
E2E API Smoke Test / E2E API Smoke Test (pull_request) Successful in 9s
Handlers Postgres Integration / Handlers Postgres Integration (pull_request) Successful in 14s
Runtime PR-Built Compatibility / PR-built wheel + import smoke (pull_request) Successful in 9s
E2E Staging Canvas (Playwright) / Canvas tabs E2E (pull_request) Successful in 8m40s
CI / Canvas (Next.js) (pull_request) Successful in 12m25s
CI / Canvas Deploy Reminder (pull_request) Has been skipped
CI / all-required (pull_request) Successful in 1s
sop-checklist / na-declarations (pull_request) awaiting /sop-n/a declaration for: qa-review, security-review
sop-checklist / all-items-acked (pull_request) [info tier:low] acked: 5/7 — missing: root-cause, no-backwards-compat — body-unfilled: comprehensive-testing, local-postgres-e2e, staging-sm
audit-force-merge / audit (pull_request) Successful in 14s
Root cause: handleKeyDown used querySelectorAll("> [role=radio]") to find
the next radio button after a key press. jsdom's selector parser throws
INDEX_SIZE_ERR on the child-combinator selector in test environments,
which @asamuzakjp/dom-selector surfaces as SyntaxError. The error
always fired after the last keyboard-navigation test in each describe
block (ArrowRight, ArrowLeft, ArrowDown, Home, End = 5 errors) and
was non-fatal to the test pass count (18/18 still passed).
Fix:
1. Replace querySelectorAll("> [role=radio]") with
Array.from(radiogroup.children).filter(el =>
el.tagName === "BUTTON" && el.getAttribute("role") === "radio"
) — avoids the child-combinator selector entirely.
2. Guard the focus call with isConnected check to survive React
StrictMode double-invocation of the handler during re-render.
3. Add bounds check (next < btns.length) before accessing btns[next].
Result: 18/18 pass, 0 errors (was 18/18 pass, 5 errors).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
|
