From 50407eb2ce7702f22698f9d48d4e7cfc62623060 Mon Sep 17 00:00:00 2001
From: functionstackx <47992694+functionstackx@users.noreply.github.com>
Date: Sat, 30 May 2026 21:30:16 -0400
Subject: [PATCH] fix: resolve react-doctor accessibility & correctness errors
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../src/app/blog/[slug]/og-image-render.tsx   |  3 +-
 packages/app/src/app/error.tsx                |  1 +
 .../inference/replay/ReplayPanel.tsx          |  1 +
 .../components/inference/ui/ChartDisplay.tsx  |  3 +
 .../submissions/SubmissionsTable.tsx          | 69 +++++++++++++------
 .../app/src/components/ui/bottom-toast.tsx    |  2 +
 .../components/ui/calendar-picker-utils.tsx   |  1 +
 .../app/src/components/ui/chart-buttons.tsx   |  3 +
 .../app/src/components/ui/chart-legend.tsx    |  3 +
 packages/app/src/components/ui/data-table.tsx |  3 +
 .../src/components/ui/multi-date-picker.tsx   |  1 +
 .../app/src/components/ui/multi-select.tsx    |  3 +
 .../src/components/ui/searchable-select.tsx   |  8 ++-
 .../src/components/ui/unofficial-banner.tsx   |  2 +
 14 files changed, 80 insertions(+), 23 deletions(-)

diff --git a/packages/app/src/app/blog/[slug]/og-image-render.tsx b/packages/app/src/app/blog/[slug]/og-image-render.tsx
index 04a3b1ef..4d1e0732 100644
--- a/packages/app/src/app/blog/[slug]/og-image-render.tsx
+++ b/packages/app/src/app/blog/[slug]/og-image-render.tsx
@@ -102,6 +102,7 @@ export async function renderOgImage(meta: BlogPostMeta) {
             <img
               key={i}
               src={tile.src}
+              alt=""
               style={{
                 position: 'absolute',
                 left: 12 + col * 90,
@@ -180,7 +181,7 @@ export async function renderOgImage(meta: BlogPostMeta) {
               timeZone: 'UTC',
             })}
           </span>
-          <img src={logoSrc} height={80} />
+          <img src={logoSrc} height={80} alt="SemiAnalysis" />
         </div>
       </div>
     </div>,
diff --git a/packages/app/src/app/error.tsx b/packages/app/src/app/error.tsx
index a03d268a..ad16ef93 100644
--- a/packages/app/src/app/error.tsx
+++ b/packages/app/src/app/error.tsx
@@ -21,6 +21,7 @@ export default function Error({
       <p className="text-lg mb-4">An unexpected error has occurred.</p>
       <p className="text-md text-red-500 mb-8">{error.message}</p>
       <button
+        type="button"
         className="px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90"
         onClick={() => {
           track('error_page_retry');
diff --git a/packages/app/src/components/inference/replay/ReplayPanel.tsx b/packages/app/src/components/inference/replay/ReplayPanel.tsx
index 6d3f5692..4ff3a499 100644
--- a/packages/app/src/components/inference/replay/ReplayPanel.tsx
+++ b/packages/app/src/components/inference/replay/ReplayPanel.tsx
@@ -604,6 +604,7 @@ export default function ReplayPanel({
         >
           <span className="flex-1">MP4 export failed: {exportError}</span>
           <button
+            type="button"
             onClick={() => setExportError(null)}
             className="text-destructive/70 hover:text-destructive cursor-pointer"
             aria-label="Dismiss"
diff --git a/packages/app/src/components/inference/ui/ChartDisplay.tsx b/packages/app/src/components/inference/ui/ChartDisplay.tsx
index f0e1692a..32590464 100644
--- a/packages/app/src/components/inference/ui/ChartDisplay.tsx
+++ b/packages/app/src/components/inference/ui/ChartDisplay.tsx
@@ -76,6 +76,7 @@ function E2eXAxisDropdown({
     <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <button
+          type="button"
           className="inline-flex items-center gap-1 hover:opacity-70 transition-opacity cursor-pointer"
           onClick={(e) => e.stopPropagation()}
         >
@@ -86,6 +87,7 @@ function E2eXAxisDropdown({
       <PopoverContent className="w-48 p-1" align="start">
         {xAxisOptions.map((opt) => (
           <button
+            type="button"
             key={opt.label}
             className={`w-full text-left px-3 py-1.5 text-sm rounded hover:bg-accent transition-colors ${
               (opt.value === null && !selectedValue) || opt.value === selectedValue
@@ -680,6 +682,7 @@ export default function ChartDisplay() {
                 />
                 {config.label}
                 <button
+                  type="button"
                   className="ml-1 hover:opacity-70"
                   onClick={() => {
                     removeTrackedConfig(config.id);
diff --git a/packages/app/src/components/submissions/SubmissionsTable.tsx b/packages/app/src/components/submissions/SubmissionsTable.tsx
index 8f755e7f..d7845e30 100644
--- a/packages/app/src/components/submissions/SubmissionsTable.tsx
+++ b/packages/app/src/components/submissions/SubmissionsTable.tsx
@@ -71,6 +71,34 @@ function getModelDisplayName(dbModel: string): string {
   return dbModel;
 }
 
+function SortHeader({
+  label,
+  field,
+  sortKey,
+  sortDir,
+  onSort,
+}: {
+  label: string;
+  field: SortKey;
+  sortKey: SortKey;
+  sortDir: SortDir;
+  onSort: (field: SortKey) => void;
+}) {
+  return (
+    <th
+      className="px-3 py-2 text-left text-xs font-medium text-muted-foreground cursor-pointer hover:text-foreground select-none"
+      onClick={() => onSort(field)}
+    >
+      <span className="flex items-center gap-1">
+        {label}
+        {sortKey === field && (
+          <span className="text-foreground">{sortDir === 'asc' ? '↑' : '↓'}</span>
+        )}
+      </span>
+    </th>
+  );
+}
+
 export default function SubmissionsTable({ data }: SubmissionsTableProps) {
   const [sortKey, setSortKey] = useState<SortKey>('date');
   const [sortDir, setSortDir] = useState<SortDir>('desc');
@@ -147,20 +175,6 @@ export default function SubmissionsTable({ data }: SubmissionsTableProps) {
     });
   }, []);
 
-  const SortHeader = ({ label, field }: { label: string; field: SortKey }) => (
-    <th
-      className="px-3 py-2 text-left text-xs font-medium text-muted-foreground cursor-pointer hover:text-foreground select-none"
-      onClick={() => handleSort(field)}
-    >
-      <span className="flex items-center gap-1">
-        {label}
-        {sortKey === field && (
-          <span className="text-foreground">{sortDir === 'asc' ? '↑' : '↓'}</span>
-        )}
-      </span>
-    </th>
-  );
-
   return (
     <div className="flex flex-col gap-3">
       <input
@@ -178,13 +192,26 @@ export default function SubmissionsTable({ data }: SubmissionsTableProps) {
           <thead className="bg-muted/50">
             <tr>
               <th className="w-8 px-2" />
-              <SortHeader label="GPU" field="hardware" />
-              <SortHeader label="Model" field="model" />
-              <SortHeader label="Precision" field="precision" />
-              <SortHeader label="Spec Method" field="spec_method" />
-              <SortHeader label="Framework" field="framework" />
-              <SortHeader label="Date" field="date" />
-              <SortHeader label="Datapoints" field="total_datapoints" />
+              {(
+                [
+                  ['GPU', 'hardware'],
+                  ['Model', 'model'],
+                  ['Precision', 'precision'],
+                  ['Spec Method', 'spec_method'],
+                  ['Framework', 'framework'],
+                  ['Date', 'date'],
+                  ['Datapoints', 'total_datapoints'],
+                ] as [string, SortKey][]
+              ).map(([label, field]) => (
+                <SortHeader
+                  key={field}
+                  label={label}
+                  field={field}
+                  sortKey={sortKey}
+                  sortDir={sortDir}
+                  onSort={handleSort}
+                />
+              ))}
               <th
                 className="px-3 py-2 text-left text-xs font-medium text-muted-foreground select-none"
                 scope="col"
diff --git a/packages/app/src/components/ui/bottom-toast.tsx b/packages/app/src/components/ui/bottom-toast.tsx
index cc69f7ac..ea0e92f0 100644
--- a/packages/app/src/components/ui/bottom-toast.tsx
+++ b/packages/app/src/components/ui/bottom-toast.tsx
@@ -77,6 +77,7 @@ export function BottomToast({
     >
       <div className="relative flex items-start gap-3 rounded-lg border border-border bg-card p-4 shadow-lg">
         <button
+          type="button"
           onClick={dismiss}
           className="absolute top-2 right-2 text-muted-foreground hover:text-foreground transition-colors"
           aria-label="Dismiss"
@@ -91,6 +92,7 @@ export function BottomToast({
           <p className="text-xs text-muted-foreground">{description}</p>
           {action && (
             <button
+              type="button"
               onClick={handleAction}
               className="flex items-center gap-1.5 self-end px-3 py-1.5 rounded-md text-xs font-medium bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
             >
diff --git a/packages/app/src/components/ui/calendar-picker-utils.tsx b/packages/app/src/components/ui/calendar-picker-utils.tsx
index 76656abc..7381b5ba 100644
--- a/packages/app/src/components/ui/calendar-picker-utils.tsx
+++ b/packages/app/src/components/ui/calendar-picker-utils.tsx
@@ -280,6 +280,7 @@ export function CalendarMonthPanel({
 
           return (
             <button
+              type="button"
               key={formatCalendarDate(day)}
               onClick={() => !disabled && !isDisabled && onDateClick(day)}
               onMouseEnter={() => !isDisabled && onDateHover?.(day)}
diff --git a/packages/app/src/components/ui/chart-buttons.tsx b/packages/app/src/components/ui/chart-buttons.tsx
index 14c0e2c0..d43294f6 100644
--- a/packages/app/src/components/ui/chart-buttons.tsx
+++ b/packages/app/src/components/ui/chart-buttons.tsx
@@ -110,6 +110,7 @@ export function ChartButtons({
           </PopoverTrigger>
           <PopoverContent align="end" className="w-44 p-1">
             <button
+              type="button"
               data-testid="export-png-button"
               data-ph-capture-attribute-export-type="png"
               data-ph-capture-attribute-chart={chartId}
@@ -122,6 +123,7 @@ export function ChartButtons({
             </button>
             {onExportCsv && (
               <button
+                type="button"
                 data-testid="export-csv-button"
                 data-ph-capture-attribute-export-type="csv"
                 data-ph-capture-attribute-chart={chartId}
@@ -134,6 +136,7 @@ export function ChartButtons({
             )}
             {onExportMp4 && (
               <button
+                type="button"
                 data-testid="export-mp4-button"
                 data-ph-capture-attribute-export-type="mp4"
                 data-ph-capture-attribute-chart={chartId}
diff --git a/packages/app/src/components/ui/chart-legend.tsx b/packages/app/src/components/ui/chart-legend.tsx
index 81d5f261..e4ee8ec8 100644
--- a/packages/app/src/components/ui/chart-legend.tsx
+++ b/packages/app/src/components/ui/chart-legend.tsx
@@ -237,6 +237,7 @@ export default function ChartLegend({
           />
           {searchQuery && (
             <button
+              type="button"
               onClick={() => {
                 track('inference_legend_search_cleared');
                 setSearchQuery('');
@@ -283,6 +284,7 @@ export default function ChartLegend({
       <div className="w-full no-export flex flex-wrap gap-x-3 gap-y-1">
         {actions.map((action) => (
           <button
+            type="button"
             key={action.id}
             data-testid={action.id}
             onClick={action.onClick}
@@ -318,6 +320,7 @@ export default function ChartLegend({
   const expandButton = hasLongText ? (
     <div className="hidden lg:block mt-2 no-export">
       <button
+        type="button"
         onClick={handleLegendExpand}
         className="text-xs text-accent-foreground hover:text-foreground flex items-center gap-1"
         aria-label={isLegendExpanded ? 'Collapse legend' : 'Expand legend'}
diff --git a/packages/app/src/components/ui/data-table.tsx b/packages/app/src/components/ui/data-table.tsx
index e69135a4..2079bd3c 100644
--- a/packages/app/src/components/ui/data-table.tsx
+++ b/packages/app/src/components/ui/data-table.tsx
@@ -160,6 +160,7 @@ export function DataTable<T>({
         />
         {search && (
           <button
+            type="button"
             onClick={() => {
               setSearch('');
               setPage(0);
@@ -286,6 +287,7 @@ export function DataTable<T>({
         </div>
         <div className="flex items-center gap-1">
           <button
+            type="button"
             onClick={() => {
               setPage((p) => Math.max(0, p - 1));
               track(`${analyticsPrefix}_page_changed`, { direction: 'prev' });
@@ -300,6 +302,7 @@ export function DataTable<T>({
             {safePage + 1} / {totalPages}
           </span>
           <button
+            type="button"
             onClick={() => {
               setPage((p) => Math.min(totalPages - 1, p + 1));
               track(`${analyticsPrefix}_page_changed`, { direction: 'next' });
diff --git a/packages/app/src/components/ui/multi-date-picker.tsx b/packages/app/src/components/ui/multi-date-picker.tsx
index 62d95bfc..06716651 100644
--- a/packages/app/src/components/ui/multi-date-picker.tsx
+++ b/packages/app/src/components/ui/multi-date-picker.tsx
@@ -179,6 +179,7 @@ export function MultiDatePicker({
                     >
                       {formatDisplayDate(dateStr)}
                       <button
+                        type="button"
                         onClick={(e) => {
                           e.stopPropagation();
                           handleRemoveTempDate(dateStr);
diff --git a/packages/app/src/components/ui/multi-select.tsx b/packages/app/src/components/ui/multi-select.tsx
index b3a83700..fa6db10e 100644
--- a/packages/app/src/components/ui/multi-select.tsx
+++ b/packages/app/src/components/ui/multi-select.tsx
@@ -62,6 +62,7 @@ function MultiSelect({
 }: MultiSelectProps) {
   const [internalIsOpen, setInternalIsOpen] = React.useState(false);
   const [search, setSearch] = React.useState('');
+  const listboxId = React.useId();
   const searchStateRef = React.useRef(search);
   searchStateRef.current = search;
   const searchableRef = React.useRef(searchable);
@@ -245,6 +246,7 @@ function MultiSelect({
         role="combobox"
         aria-expanded={isOpen}
         aria-haspopup="listbox"
+        aria-controls={listboxId}
         onClick={() => !disabled && setIsOpen(!isOpen)}
         disabled={disabled}
         data-slot="select-trigger"
@@ -327,6 +329,7 @@ function MultiSelect({
       {isOpen && (
         <div
           ref={contentRef}
+          id={listboxId}
           tabIndex={-1}
           data-slot="select-content"
           className={cn(
diff --git a/packages/app/src/components/ui/searchable-select.tsx b/packages/app/src/components/ui/searchable-select.tsx
index 1c92fea1..09fe2764 100644
--- a/packages/app/src/components/ui/searchable-select.tsx
+++ b/packages/app/src/components/ui/searchable-select.tsx
@@ -44,6 +44,7 @@ export function SearchableSelect({
 }: SearchableSelectProps) {
   const [isOpen, setIsOpen] = React.useState(false);
   const [search, setSearch] = React.useState('');
+  const listboxId = React.useId();
   // Defer the trigger label until the component has mounted on the client.
   // The selected value derives from URL params / persisted state which only
   // resolve client-side, so SSR would otherwise lock in the default label and
@@ -125,6 +126,7 @@ export function SearchableSelect({
         role="combobox"
         aria-expanded={isOpen}
         aria-haspopup="listbox"
+        aria-controls={listboxId}
         onClick={() => !disabled && setIsOpen(!isOpen)}
         disabled={disabled}
         className={cn(
@@ -188,7 +190,11 @@ export function SearchableSelect({
               )}
             </div>
           )}
-          <div className="p-1 max-h-72 overflow-y-auto custom-scrollbar">
+          <div
+            id={listboxId}
+            role="listbox"
+            className="p-1 max-h-72 overflow-y-auto custom-scrollbar"
+          >
             {filteredGroups.length === 0 && (
               <div className="text-muted-foreground px-2 py-1.5 text-sm text-center">
                 No results
diff --git a/packages/app/src/components/ui/unofficial-banner.tsx b/packages/app/src/components/ui/unofficial-banner.tsx
index d1274c4c..f412c13b 100644
--- a/packages/app/src/components/ui/unofficial-banner.tsx
+++ b/packages/app/src/components/ui/unofficial-banner.tsx
@@ -62,6 +62,7 @@ export function UnofficialBanner({ runs, onDismissRun, onDismissAll }: Unofficia
         </div>
         {multiple && onDismissAll && (
           <button
+            type="button"
             onClick={() => {
               track('unofficial_banner_dismissed_all', { count: runs.length });
               onDismissAll();
@@ -107,6 +108,7 @@ function RunChip({
       </a>
       {onDismiss && (
         <button
+          type="button"
           onClick={() => {
             track('unofficial_banner_run_dismissed', { branch: run.branch });
             onDismiss();