fix: resolve react-doctor accessibility & correctness errors

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>

Author: functionstackx

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>,

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');

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"

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);

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"

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"
             >

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)}

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}

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'}

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' });