Skip to content

fix: react-doctor sweep — accessibility, correctness, perf & key fixes#409

Merged
functionstackx merged 1 commit into
masterfrom
chore/react-doctor-fixes-2026-05-30
May 31, 2026
Merged

fix: react-doctor sweep — accessibility, correctness, perf & key fixes#409
functionstackx merged 1 commit into
masterfrom
chore/react-doctor-fixes-2026-05-30

Conversation

@functionstackx
Copy link
Copy Markdown
Contributor

@functionstackx functionstackx commented May 31, 2026

What

Ran npx react-doctor@latest (https://react.doctor) against the app and worked the findings down across two commits. The initial scan reported 616 issues / 45→100 (Critical); this PR brings it to 415 issues / 63→100 (Needs work)201 issues resolved, all behavior-preserving.

Issues Score
Before 616 45 (Critical)
After 415 63 (Needs work)

Commit 1 — blocking errors (a11y + correctness)

  • no-nested-component-definition: hoisted SortHeader out of SubmissionsTable to module scope (stable identity instead of remount-per-render).
  • alt-text (2), role-has-required-aria-props (2): OG-image alt text; aria-controls on combobox triggers.
  • button-has-type (20): explicit type="button" on chart/UI buttons.

Commit 2 — warning sweep (~187 fixes, 83 files)

Run as a 15-agent parallel workflow partitioned by file (each file owned by exactly one agent — no edit collisions). Every agent fetched the canonical fix recipe per rule and stayed strictly behavior-preserving.

  • Perf: js-combine-iterations (48), js-set-map-lookups (10), js-flatmap-filter (7), js-index-maps (5), js-hoist-intl (2), js-batch-dom-css (2) — single-pass loops / Set lookups, identical output.
  • Design (visually identical): design-no-space-on-flex-children (21, space-y/x → gap), design-no-redundant-size-axes (4, h-4 w-4 → size-4), design-no-redundant-padding-axes (3).
  • React 19: no-react19-deprecated-apis (17, e.g. useContextuse).
  • Deps: exhaustive-deps (12) — added stable setters/callbacks (no-op) or genuinely missing deps; removed unused deps.
  • A11y: control-has-associated-label (9), click-events-have-key-events (5), interactive-supports-focus (4), prefer-tag-over-role (3), label-has-associated-control (2), no-static-element-interactions (1).
  • Keys: no-array-index-key (10), no-array-index-as-key (7) → stable data-derived keys.
  • State: date-picker / multi-date-picker no-derived-state-effect + no-chain-state-updates — moved setError('') from an effect into the open-change handler.
  • Misc: client-localstorage-no-version (3), rerender-memo-with-default-value (2), no-usememo-simple-expression (2), no-generic-handler-names (2), prefer-module-scope-static-value (1), rendering-hydration-mismatch-time (1).

Deliberately NOT changed (387 findings skipped, each with a recorded reason)

  • 26 State & Effects errors + most of that category: many are false positives (e.g. no-event-handler firing on useChartData hook args) or carry real behavior risk in the inference/eval/global context providers and the D3 render/zoom lifecycle. react-doctor itself warns against blindly adding deps — these are left for targeted human review.
  • nextjs-no-img-element: the agents converted 4 <img>next/image; I reverted all 4. The logos are SVGs with varied aspect ratios and the watermark is 552×228 — next/image forces a single width/height (distortion) and SVG needs dangerouslyAllowSVG. Kept raw <img>; the rule is a perf nicety, not correctness.
  • Visible-copy rules (em-dash, ellipsis, vague-button-label), giant-component splits, and cross-file export moves (only-export-components) — out of scope; need a content or architecture decision.

Verification

  • pnpm typecheck ✅ · pnpm lint (app src, 0/0) ✅ · pnpm fmt
  • pnpm test:unit ✅ — 2201 tests pass (1944 app + 212 db + 25 mcp + 20 constants)
  • Pre-commit hooks (lint/format/typecheck) green on both commits.
  • Spot-checked the highest-risk applied changes (the 48 js-combine-iterations rewrites preserve order/output; the 16 effect/dep changes are no-ops or genuinely-missing deps).

Overlay support

The touched code is shared UI primitives, perf/a11y cleanups, and context plumbing used by both the official and ?unofficialrun= paths — no inference/eval chart-data feature was added or branched, so overlay behavior is unchanged. Verified via the existing overlay unit/E2E tests (all green).

🤖 Generated with Claude Code

Run of `npx react-doctor@latest` flagged 616 issues (score 45/100). This
commit clears all blocking errors in the Accessibility and Correctness
categories plus the mechanical `button-has-type` warnings, raising the
score to 57/100 (591 issues). Behavior-preserving only — the State &
Effects errors and perf/architecture warnings are left for follow-up PRs
since they require deeper, behavior-sensitive review.

Fixes:
- no-nested-component-definition: hoist `SortHeader` out of
  `SubmissionsTable` to module scope and pass sort state via props, so it
  keeps a stable identity instead of remounting every render.
- alt-text (×2): add `alt` to the OG-image circuit tiles (decorative,
  `alt=""`) and the logo (`alt="SemiAnalysis"`).
- role-has-required-aria-props (×2): add `aria-controls` to the
  `role="combobox"` triggers in multi-select / searchable-select, wired to
  a `useId()`-generated listbox id on the popup.
- button-has-type (×20): add explicit `type="button"` to chart/UI buttons
  (none are form submits).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@functionstackx functionstackx requested a review from adibarra as a code owner May 31, 2026 01:30
@vercel
Copy link
Copy Markdown

vercel Bot commented May 31, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
inferencemax-app Ready Ready Preview, Comment May 31, 2026 1:31am

Request Review

Copy link
Copy Markdown

@cursor cursor Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 50407eb. Configure here.

Comment thread packages/app/src/components/ui/multi-select.tsx
@functionstackx functionstackx enabled auto-merge (squash) May 31, 2026 01:40
@functionstackx functionstackx merged commit 8bd9776 into master May 31, 2026
20 checks passed
@functionstackx functionstackx deleted the chore/react-doctor-fixes-2026-05-30 branch May 31, 2026 01:40
@functionstackx functionstackx changed the title fix: resolve react-doctor accessibility & correctness errors fix: react-doctor sweep — accessibility, correctness, perf & key fixes May 31, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant