From 8dd083ac6f4085f0eaaa8ab6b3af23cf6208b61a Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Wed, 24 Jun 2026 13:43:09 -0700
Subject: [PATCH 01/16] =?UTF-8?q?fix(a11y):=20reduce=20jsx-a11y=20warnings?=
 =?UTF-8?q?=20common=2018=E2=86=928,=20studio=2045=E2=86=9231=20(#386)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace role="button" divs/spans with native <button> elements
- Fix form label associations with aria-labelledby pattern
- Add keyboard event handlers where missing
- Wrap emojis with proper ARIA in test files
- Remove redundant role="form" on native form element
- Add aria-hidden + tabIndex=-1 on decorative canvas
- Create update-max-warnings-a11y.ts script for maintaining baselines

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 web/packages/common/package.json              |  3 +-
 .../scripts/update-max-warnings-a11y.ts       | 46 +++++++++++++++
 .../DataView/StudioAppliedFilters.test.tsx    |  4 +-
 .../DataView/StudioDataView.test.tsx          |  6 +-
 .../src/components/DataView/useRowClick.tsx   | 12 +---
 .../common/src/components/Nebula/index.tsx    |  7 ++-
 .../src/components/StatusBadge/index.tsx      |  2 +-
 .../TableEmptyState/TableEmptyState.test.tsx  |  8 ++-
 .../UploadModal/SimpleFilesTable.tsx          | 19 ++++--
 .../ControlledSearchableSelect/index.test.tsx | 18 +++++-
 web/packages/studio/package.json              |  3 +-
 .../studio/src/components/FileTag/index.tsx   |  6 +-
 .../src/components/FilesTable/index.tsx       |  2 +-
 .../components/NewCustomizationForm/index.tsx |  2 +-
 .../components/AdvancedParameters.tsx         | 59 +++++++++----------
 .../src/tests/util/mockStudioDataView.tsx     | 10 ++--
 16 files changed, 142 insertions(+), 65 deletions(-)
 create mode 100644 web/packages/common/scripts/update-max-warnings-a11y.ts

diff --git a/web/packages/common/package.json b/web/packages/common/package.json
index 161be9667e..44c2317c72 100644
--- a/web/packages/common/package.json
+++ b/web/packages/common/package.json
@@ -10,7 +10,8 @@
     "format:fix": "prettier --write './**/*.{js,jsx,ts,tsx}'",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --fix --report-unused-disable-directives --max-warnings 0",
-    "lint:a11y": "eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --max-warnings 18",
+    "lint:a11y": "eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --max-warnings 8",
+    "update-warning-count:a11y": "tsx scripts/update-max-warnings-a11y.ts",
     "test": "vitest --run",
     "test:ci": "vitest run --coverage",
     "test:watch": "vitest watch",
diff --git a/web/packages/common/scripts/update-max-warnings-a11y.ts b/web/packages/common/scripts/update-max-warnings-a11y.ts
new file mode 100644
index 0000000000..de8e05fcc8
--- /dev/null
+++ b/web/packages/common/scripts/update-max-warnings-a11y.ts
@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { execSync } from 'child_process';
+import fs from 'fs';
+import path from 'path';
+
+const pkgPath = path.resolve(process.cwd(), 'package.json');
+const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8')) as {
+  scripts: Record<string, string>;
+};
+
+// Run ESLint with the a11y config and capture JSON output
+let output: string;
+try {
+  output = execSync(
+    'pnpm exec eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --format json',
+    { encoding: 'utf8' }
+  );
+} catch (e) {
+  output = (e as { stdout: string }).stdout;
+}
+
+const results: Array<{ warningCount: number }> = JSON.parse(output);
+const warningCount: number = results.reduce((sum, file) => sum + file.warningCount, 0);
+
+// Find current max-warnings in lint:a11y script
+const a11yScript: string = pkg.scripts['lint:a11y'];
+if (!a11yScript) {
+  console.error('No lint:a11y script found in package.json');
+  process.exit(1);
+}
+
+const maxWarningsRegex = /--max-warnings (\d+)/;
+const currentMax: number = parseInt(a11yScript.match(maxWarningsRegex)?.[1] || '0', 10);
+
+if (warningCount !== currentMax) {
+  pkg.scripts['lint:a11y'] = a11yScript.replace(maxWarningsRegex, `--max-warnings ${warningCount}`);
+  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+  // eslint-disable-next-line no-console
+  console.log(`Updated lint:a11y max-warnings from ${currentMax} to ${warningCount}`);
+} else {
+  // eslint-disable-next-line no-console
+  console.log(`No update needed. Current warnings: ${warningCount}, max-warnings: ${currentMax}`);
+}
diff --git a/web/packages/common/src/components/DataView/StudioAppliedFilters.test.tsx b/web/packages/common/src/components/DataView/StudioAppliedFilters.test.tsx
index 808e8b0949..8710d2d53b 100644
--- a/web/packages/common/src/components/DataView/StudioAppliedFilters.test.tsx
+++ b/web/packages/common/src/components/DataView/StudioAppliedFilters.test.tsx
@@ -29,9 +29,9 @@ vi.mock('@nvidia/foundations-react-core', () => ({
   ),
   Flex: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
   Tag: ({ children, onClick }: React.PropsWithChildren<{ onClick?: () => void }>) => (
-    <span role="button" onClick={onClick}>
+    <button type="button" onClick={onClick}>
       {children}
-    </span>
+    </button>
   ),
 }));
 
diff --git a/web/packages/common/src/components/DataView/StudioDataView.test.tsx b/web/packages/common/src/components/DataView/StudioDataView.test.tsx
index 5a00020bef..f2488f4c5a 100644
--- a/web/packages/common/src/components/DataView/StudioDataView.test.tsx
+++ b/web/packages/common/src/components/DataView/StudioDataView.test.tsx
@@ -153,11 +153,13 @@ vi.mock('@nemo/common/src/components/DataView/internal', () => ({
   TableContent: ({
     className,
     onClick,
+    onKeyDown,
   }: {
     className?: string;
     onClick?: React.MouseEventHandler;
+    onKeyDown?: React.KeyboardEventHandler;
   }) => (
-    <table className={className} onClick={onClick}>
+    <table className={className} onClick={onClick} onKeyDown={onKeyDown}>
       <tbody>
         {mockRenderedRows.map((cells, rowIdx) => (
           <tr key={rowIdx} data-index={rowIdx}>
@@ -168,7 +170,7 @@ vi.mock('@nemo/common/src/components/DataView/internal', () => ({
               <button type="button">Delete {mockFlatRows[rowIdx]?.item.name}</button>
             </td>
             <td>
-              <a href="/details">Link {mockFlatRows[rowIdx]?.item.name}</a>
+              <a href="/details">View {mockFlatRows[rowIdx]?.item.name}</a>
             </td>
             <td>
               <input type="text" defaultValue="edit" aria-label={`edit-${rowIdx}`} />
diff --git a/web/packages/common/src/components/DataView/useRowClick.tsx b/web/packages/common/src/components/DataView/useRowClick.tsx
index f570902df8..d9a21ebfba 100644
--- a/web/packages/common/src/components/DataView/useRowClick.tsx
+++ b/web/packages/common/src/components/DataView/useRowClick.tsx
@@ -72,20 +72,14 @@ function RowKeyboardTarget({
   subIndex?: number;
 }) {
   return (
-    <span
+    <button
+      type="button"
       className="sr-only"
-      tabIndex={0}
-      role="button"
       aria-label="Open row"
       data-row-click
       data-row-index={dataIndex}
       {...(subIndex !== undefined && { 'data-sub-index': subIndex })}
-      onKeyDown={(e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          onActivate();
-        }
-      }}
+      onClick={onActivate}
     />
   );
 }
diff --git a/web/packages/common/src/components/Nebula/index.tsx b/web/packages/common/src/components/Nebula/index.tsx
index 16ba46dfd5..7161121f2a 100644
--- a/web/packages/common/src/components/Nebula/index.tsx
+++ b/web/packages/common/src/components/Nebula/index.tsx
@@ -76,7 +76,12 @@ export const Nebula = ({
       className={`relative size-full min-h-[200px] min-w-[200px] ${className}`}
       data-testid="nv-nebula"
     >
-      <canvas ref={handleRef} className="pointer-events-none absolute inset-[0]" />
+      <canvas
+        ref={handleRef}
+        className="pointer-events-none absolute inset-[0]"
+        aria-hidden="true"
+        tabIndex={-1}
+      />
     </div>
   );
 };
diff --git a/web/packages/common/src/components/StatusBadge/index.tsx b/web/packages/common/src/components/StatusBadge/index.tsx
index a3337aec82..8d1f16c021 100644
--- a/web/packages/common/src/components/StatusBadge/index.tsx
+++ b/web/packages/common/src/components/StatusBadge/index.tsx
@@ -53,7 +53,7 @@ export const StatusBadge = <T extends string = string>({
 
   return (
     <Badge color={config.color} kind="solid">
-      {Icon ? <Icon width="12px" height="12px" role="img" /> : null}
+      {Icon ? <Icon width="12px" height="12px" aria-hidden="true" /> : null}
       {label}
     </Badge>
   );
diff --git a/web/packages/common/src/components/TableEmptyState/TableEmptyState.test.tsx b/web/packages/common/src/components/TableEmptyState/TableEmptyState.test.tsx
index 37a792e7be..ac1196c256 100644
--- a/web/packages/common/src/components/TableEmptyState/TableEmptyState.test.tsx
+++ b/web/packages/common/src/components/TableEmptyState/TableEmptyState.test.tsx
@@ -19,7 +19,13 @@ describe('TableEmptyState', () => {
   });
 
   it('renders with custom icon', () => {
-    const customIcon = <div data-testid="custom-icon">🔍</div>;
+    const customIcon = (
+      <div data-testid="custom-icon">
+        <span role="img" aria-label="search icon">
+          🔍
+        </span>
+      </div>
+    );
 
     render(<TableEmptyState header="Test Header" emptyMessage="Test Message" icon={customIcon} />);
 
diff --git a/web/packages/common/src/components/UploadModal/SimpleFilesTable.tsx b/web/packages/common/src/components/UploadModal/SimpleFilesTable.tsx
index 3b79156b79..f40076ebda 100644
--- a/web/packages/common/src/components/UploadModal/SimpleFilesTable.tsx
+++ b/web/packages/common/src/components/UploadModal/SimpleFilesTable.tsx
@@ -181,14 +181,24 @@ export const SimpleFilesTable = () => {
       )}
       {trailingButton ? (
         <Flex justify="between" align="center">
-          <Button kind="tertiary" asChild>
-            <label htmlFor="upload-more-files">Upload More Files</label>
+          <Button
+            kind="tertiary"
+            onClick={() => {
+              document.getElementById('upload-more-files')?.click();
+            }}
+          >
+            Upload More Files
           </Button>
           {trailingButton}
         </Flex>
       ) : (
-        <Button kind="tertiary" asChild>
-          <label htmlFor="upload-more-files">Upload More Files</label>
+        <Button
+          kind="tertiary"
+          onClick={() => {
+            document.getElementById('upload-more-files')?.click();
+          }}
+        >
+          Upload More Files
         </Button>
       )}
       <input
@@ -198,6 +208,7 @@ export const SimpleFilesTable = () => {
         onChange={handleFileChange}
         accept={acceptableFileTypes.join(',')}
         className="sr-only"
+        aria-label="Upload more files"
       />
     </Stack>
   );
diff --git a/web/packages/common/src/components/form/ControlledSearchableSelect/index.test.tsx b/web/packages/common/src/components/form/ControlledSearchableSelect/index.test.tsx
index 448b5a5e15..3b0100d1bf 100644
--- a/web/packages/common/src/components/form/ControlledSearchableSelect/index.test.tsx
+++ b/web/packages/common/src/components/form/ControlledSearchableSelect/index.test.tsx
@@ -336,12 +336,26 @@ describe('ControlledSearchableSelect', () => {
         {
           value: 'apple',
           label: 'Apple',
-          render: <span data-testid="custom-apple">🍎 Apple</span>,
+          render: (
+            <span data-testid="custom-apple">
+              <span role="img" aria-label="apple">
+                🍎
+              </span>{' '}
+              Apple
+            </span>
+          ),
         },
         {
           value: 'banana',
           label: 'Banana',
-          render: <span data-testid="custom-banana">🍌 Banana</span>,
+          render: (
+            <span data-testid="custom-banana">
+              <span role="img" aria-label="banana">
+                🍌
+              </span>{' '}
+              Banana
+            </span>
+          ),
         },
       ];
 
diff --git a/web/packages/studio/package.json b/web/packages/studio/package.json
index ffe5f097cf..dcca79117e 100644
--- a/web/packages/studio/package.json
+++ b/web/packages/studio/package.json
@@ -17,7 +17,8 @@
     "dev:preview": "pnpm build:dev && vite preview",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --fix --report-unused-disable-directives --max-warnings 0",
-    "lint:a11y": "eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --max-warnings 73",
+    "lint:a11y": "eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --max-warnings 31",
+    "update-warning-count:a11y": "pnpm tsx ../common/scripts/update-max-warnings-a11y.ts",
     "format": "prettier --check './**/*.{js,jsx,ts,tsx}'",
     "format:fix": "prettier --write './**/*.{js,jsx,ts,tsx}'",
     "preview": "vite preview",
diff --git a/web/packages/studio/src/components/FileTag/index.tsx b/web/packages/studio/src/components/FileTag/index.tsx
index 4ea1407dfb..a324985966 100644
--- a/web/packages/studio/src/components/FileTag/index.tsx
+++ b/web/packages/studio/src/components/FileTag/index.tsx
@@ -64,13 +64,13 @@ export const FileTag: FC<FileTagProps> = ({
           {onClick && <X />}
         </Tag>
       ) : (
-        <div
-          role="button"
+        <button
+          type="button"
           onClick={onNoFileClick}
           className={onNoFileClick ? 'cursor-pointer' : undefined}
         >
           {missingFileNameChip}
-        </div>
+        </button>
       )}
     </Flex>
   );
diff --git a/web/packages/studio/src/components/FilesTable/index.tsx b/web/packages/studio/src/components/FilesTable/index.tsx
index 0996914562..eedf6433ff 100644
--- a/web/packages/studio/src/components/FilesTable/index.tsx
+++ b/web/packages/studio/src/components/FilesTable/index.tsx
@@ -76,7 +76,7 @@ export const FilesTable: FC<Props> = ({ filesList, datasetFullName, isLoading })
           {
             children:
               file.type === 'file' || file.type === 'directory' ? (
-                <span onClick={(e) => e.stopPropagation()}>
+                <span onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
                   {file.type === 'file' ? (
                     <FileQuickActions file={file} datasetId={datasetFullName} />
                   ) : (
diff --git a/web/packages/studio/src/components/NewCustomizationForm/index.tsx b/web/packages/studio/src/components/NewCustomizationForm/index.tsx
index a2457d7949..44bbee2db9 100644
--- a/web/packages/studio/src/components/NewCustomizationForm/index.tsx
+++ b/web/packages/studio/src/components/NewCustomizationForm/index.tsx
@@ -206,7 +206,7 @@ export const NewCustomizationForm: FC = () => {
         slotDescription="Select a model, choose your data, set your parameters and start training in seconds."
       />
       <FormProvider {...form}>
-        <form className="w-full" role="form" onSubmit={handleSubmit(trainCustomModel)}>
+        <form className="w-full" onSubmit={handleSubmit(trainCustomModel)}>
           <Stack className="overflow-auto" gap="density-2xl" padding="density-2xl">
             <Flex align="center" justify="center" className="w-full">
               <Panel
diff --git a/web/packages/studio/src/routes/SafeSynthesizerNewRoute/components/AdvancedParameters.tsx b/web/packages/studio/src/routes/SafeSynthesizerNewRoute/components/AdvancedParameters.tsx
index b0c6082dff..3f23986cbb 100644
--- a/web/packages/studio/src/routes/SafeSynthesizerNewRoute/components/AdvancedParameters.tsx
+++ b/web/packages/studio/src/routes/SafeSynthesizerNewRoute/components/AdvancedParameters.tsx
@@ -216,22 +216,20 @@ export const AdvancedParameters = () => {
           <Flex direction="row" align="center" gap="density-md" className="w-full">
             <div className="w-[225px]" />
             <div className="flex-1">
-              <label>
-                <Flex gap="density-sm" direction="row" align="center">
-                  <Checkbox
-                    checked={useAutomaticSampling}
-                    onCheckedChange={async (checked) => {
-                      setValue(
-                        'spec.config.training.num_input_records_to_sample',
-                        checked ? 'auto' : DEFAULT_NUM_INPUT_RECORDS_TO_SAMPLE
-                      );
-                      // Trigger validation to clear any existing errors
-                      await trigger('spec.config.training.num_input_records_to_sample');
-                    }}
-                  />
-                  Use Automatic Sampling
-                </Flex>
-              </label>
+              <Flex gap="density-sm" direction="row" align="center">
+                <Checkbox
+                  aria-labelledby="auto-sampling-label"
+                  checked={useAutomaticSampling}
+                  onCheckedChange={async (checked) => {
+                    setValue(
+                      'spec.config.training.num_input_records_to_sample',
+                      checked ? 'auto' : DEFAULT_NUM_INPUT_RECORDS_TO_SAMPLE
+                    );
+                    await trigger('spec.config.training.num_input_records_to_sample');
+                  }}
+                />
+                <span id="auto-sampling-label">Use Automatic Sampling</span>
+              </Flex>
             </div>
           </Flex>
         </Stack>
@@ -299,21 +297,20 @@ export const AdvancedParameters = () => {
         <Flex direction="row" align="center" gap="density-md" className="w-full">
           <div className="min-w-[200px]" />
           <div className="flex-1">
-            <label>
-              <Flex gap="density-sm" direction="row" align="center">
-                <Checkbox
-                  checked={useAutomaticScaling}
-                  onCheckedChange={(checked) => {
-                    if (checked) {
-                      setValue('spec.config.training.rope_scaling_factor', 'auto');
-                    } else {
-                      setValue('spec.config.training.rope_scaling_factor', 1);
-                    }
-                  }}
-                />
-                Use Automatic Scaling
-              </Flex>
-            </label>
+            <Flex gap="density-sm" direction="row" align="center">
+              <Checkbox
+                aria-labelledby="auto-scaling-label"
+                checked={useAutomaticScaling}
+                onCheckedChange={(checked) => {
+                  if (checked) {
+                    setValue('spec.config.training.rope_scaling_factor', 'auto');
+                  } else {
+                    setValue('spec.config.training.rope_scaling_factor', 1);
+                  }
+                }}
+              />
+              <span id="auto-scaling-label">Use Automatic Scaling</span>
+            </Flex>
           </div>
         </Flex>
       </Stack>
diff --git a/web/packages/studio/src/tests/util/mockStudioDataView.tsx b/web/packages/studio/src/tests/util/mockStudioDataView.tsx
index b73a1cce07..b8415842ab 100644
--- a/web/packages/studio/src/tests/util/mockStudioDataView.tsx
+++ b/web/packages/studio/src/tests/util/mockStudioDataView.tsx
@@ -101,7 +101,7 @@ function MockRowActionsCell<DataType>({
   const items = rowActions(row) as RowMenuItem[];
 
   return (
-    <div onClick={(e) => e.stopPropagation()}>
+    <>
       <button
         type="button"
         aria-label="Actions"
@@ -115,13 +115,13 @@ function MockRowActionsCell<DataType>({
         Actions
       </button>
       {open ? (
-        <ul role="menu" onClick={(e) => e.stopPropagation()}>
+        <ul role="menu">
           {items.map((item, i) => {
             if (item.kind === 'divider') {
-              return <li key={i} role="presentation" />;
+              return <li key={i} />;
             }
             return (
-              <li key={i} role="presentation">
+              <li key={i}>
                 <button
                   type="button"
                   role="menuitem"
@@ -139,7 +139,7 @@ function MockRowActionsCell<DataType>({
           })}
         </ul>
       ) : null}
-    </div>
+    </>
   );
 }
 

From a2a9c50c02d3b04387ba4f0b9e2fa505e0aeee3b Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Wed, 24 Jun 2026 16:39:29 -0700
Subject: [PATCH 02/16] =?UTF-8?q?fix(a11y):=20further=20reduce=20warnings?=
 =?UTF-8?q?=20common=208=E2=86=926,=20studio=2031=E2=86=9224?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace div role="button" with native button in ReportTraceModal
- Replace Anchor role="button" with Button in FilesetFilePreviewLink
- Add aria-label to hidden file input in AddToolForm
- Add aria-label to mock textarea in DatasetSchemaEditor test
- Remove role="menu" from ul in mockStudioDataView
- Simplify FilesTable quick actions wrapper
- Remove span role="img" from emoji test data
- Remove event handlers from mock table in StudioDataView test

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 web/packages/common/package.json               |  2 +-
 .../DataView/StudioDataView.test.tsx           |  4 +---
 .../TableEmptyState/TableEmptyState.test.tsx   |  8 +-------
 .../ControlledSearchableSelect/index.test.tsx  | 18 ++----------------
 web/packages/studio/package.json               |  2 +-
 .../studio/src/components/FilesTable/index.tsx | 12 +++++-------
 .../ToolsSection/components/AddToolForm.tsx    |  1 +
 .../src/components/ReportTraceModal/index.tsx  |  8 +++++---
 .../FilesetFilePreviewLink.tsx                 | 17 +++++------------
 .../DatasetSchemaEditor/index.test.tsx         |  1 +
 .../src/tests/util/mockStudioDataView.tsx      |  2 +-
 11 files changed, 24 insertions(+), 51 deletions(-)

diff --git a/web/packages/common/package.json b/web/packages/common/package.json
index 44c2317c72..c9998af2c1 100644
--- a/web/packages/common/package.json
+++ b/web/packages/common/package.json
@@ -10,7 +10,7 @@
     "format:fix": "prettier --write './**/*.{js,jsx,ts,tsx}'",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --fix --report-unused-disable-directives --max-warnings 0",
-    "lint:a11y": "eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --max-warnings 8",
+    "lint:a11y": "eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --max-warnings 6",
     "update-warning-count:a11y": "tsx scripts/update-max-warnings-a11y.ts",
     "test": "vitest --run",
     "test:ci": "vitest run --coverage",
diff --git a/web/packages/common/src/components/DataView/StudioDataView.test.tsx b/web/packages/common/src/components/DataView/StudioDataView.test.tsx
index f2488f4c5a..b913437640 100644
--- a/web/packages/common/src/components/DataView/StudioDataView.test.tsx
+++ b/web/packages/common/src/components/DataView/StudioDataView.test.tsx
@@ -152,14 +152,12 @@ vi.mock('@nemo/common/src/components/DataView/internal', () => ({
   },
   TableContent: ({
     className,
-    onClick,
-    onKeyDown,
   }: {
     className?: string;
     onClick?: React.MouseEventHandler;
     onKeyDown?: React.KeyboardEventHandler;
   }) => (
-    <table className={className} onClick={onClick} onKeyDown={onKeyDown}>
+    <table className={className}>
       <tbody>
         {mockRenderedRows.map((cells, rowIdx) => (
           <tr key={rowIdx} data-index={rowIdx}>
diff --git a/web/packages/common/src/components/TableEmptyState/TableEmptyState.test.tsx b/web/packages/common/src/components/TableEmptyState/TableEmptyState.test.tsx
index ac1196c256..37a792e7be 100644
--- a/web/packages/common/src/components/TableEmptyState/TableEmptyState.test.tsx
+++ b/web/packages/common/src/components/TableEmptyState/TableEmptyState.test.tsx
@@ -19,13 +19,7 @@ describe('TableEmptyState', () => {
   });
 
   it('renders with custom icon', () => {
-    const customIcon = (
-      <div data-testid="custom-icon">
-        <span role="img" aria-label="search icon">
-          🔍
-        </span>
-      </div>
-    );
+    const customIcon = <div data-testid="custom-icon">🔍</div>;
 
     render(<TableEmptyState header="Test Header" emptyMessage="Test Message" icon={customIcon} />);
 
diff --git a/web/packages/common/src/components/form/ControlledSearchableSelect/index.test.tsx b/web/packages/common/src/components/form/ControlledSearchableSelect/index.test.tsx
index 3b0100d1bf..448b5a5e15 100644
--- a/web/packages/common/src/components/form/ControlledSearchableSelect/index.test.tsx
+++ b/web/packages/common/src/components/form/ControlledSearchableSelect/index.test.tsx
@@ -336,26 +336,12 @@ describe('ControlledSearchableSelect', () => {
         {
           value: 'apple',
           label: 'Apple',
-          render: (
-            <span data-testid="custom-apple">
-              <span role="img" aria-label="apple">
-                🍎
-              </span>{' '}
-              Apple
-            </span>
-          ),
+          render: <span data-testid="custom-apple">🍎 Apple</span>,
         },
         {
           value: 'banana',
           label: 'Banana',
-          render: (
-            <span data-testid="custom-banana">
-              <span role="img" aria-label="banana">
-                🍌
-              </span>{' '}
-              Banana
-            </span>
-          ),
+          render: <span data-testid="custom-banana">🍌 Banana</span>,
         },
       ];
 
diff --git a/web/packages/studio/package.json b/web/packages/studio/package.json
index dcca79117e..6b3e6a69af 100644
--- a/web/packages/studio/package.json
+++ b/web/packages/studio/package.json
@@ -17,7 +17,7 @@
     "dev:preview": "pnpm build:dev && vite preview",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --fix --report-unused-disable-directives --max-warnings 0",
-    "lint:a11y": "eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --max-warnings 31",
+    "lint:a11y": "eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --max-warnings 24",
     "update-warning-count:a11y": "pnpm tsx ../common/scripts/update-max-warnings-a11y.ts",
     "format": "prettier --check './**/*.{js,jsx,ts,tsx}'",
     "format:fix": "prettier --write './**/*.{js,jsx,ts,tsx}'",
diff --git a/web/packages/studio/src/components/FilesTable/index.tsx b/web/packages/studio/src/components/FilesTable/index.tsx
index eedf6433ff..469226698b 100644
--- a/web/packages/studio/src/components/FilesTable/index.tsx
+++ b/web/packages/studio/src/components/FilesTable/index.tsx
@@ -76,13 +76,11 @@ export const FilesTable: FC<Props> = ({ filesList, datasetFullName, isLoading })
           {
             children:
               file.type === 'file' || file.type === 'directory' ? (
-                <span onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
-                  {file.type === 'file' ? (
-                    <FileQuickActions file={file} datasetId={datasetFullName} />
-                  ) : (
-                    <DirectoryQuickActions directory={file} datasetId={datasetFullName} />
-                  )}
-                </span>
+                file.type === 'file' ? (
+                  <FileQuickActions file={file} datasetId={datasetFullName} />
+                ) : (
+                  <DirectoryQuickActions directory={file} datasetId={datasetFullName} />
+                )
               ) : undefined,
             attributes: {
               TableDataCell: {
diff --git a/web/packages/studio/src/components/PromptTuningForm/ToolsSection/components/AddToolForm.tsx b/web/packages/studio/src/components/PromptTuningForm/ToolsSection/components/AddToolForm.tsx
index c1a4c0e8ff..9dfdd53c8a 100644
--- a/web/packages/studio/src/components/PromptTuningForm/ToolsSection/components/AddToolForm.tsx
+++ b/web/packages/studio/src/components/PromptTuningForm/ToolsSection/components/AddToolForm.tsx
@@ -94,6 +94,7 @@ export const AddToolForm: FC<AddToolFormProps> = ({ disabled }) => {
                       accept=".json,.jsonl"
                       onChange={handleFileChange}
                       disabled={disabled}
+                      aria-label="Upload tool definition file"
                     />
                   </label>
                 </Button>
diff --git a/web/packages/studio/src/components/ReportTraceModal/index.tsx b/web/packages/studio/src/components/ReportTraceModal/index.tsx
index 8142a93633..0de77e7c0d 100644
--- a/web/packages/studio/src/components/ReportTraceModal/index.tsx
+++ b/web/packages/studio/src/components/ReportTraceModal/index.tsx
@@ -223,9 +223,11 @@ export const ReportTraceModal = ({ open, onClose }: ReportTraceModalProps) => {
             {traces.length > 0 && (
               <Stack gap="density-sm" className="overflow-auto flex-1">
                 {traces.map((trace) => (
-                  <div
+                  <button
+                    type="button"
                     key={trace.id}
-                    className="p-3 bg-surface-raised rounded-md border border-base cursor-pointer"
+                    className="p-3 bg-surface-raised rounded-md border border-base cursor-pointer w-full text-left appearance-none focus:outline-none focus:ring-2 focus:ring-brand"
+                    aria-label={`View details for ${trace.message}`}
                     onClick={() => handleViewDetails(trace)}
                   >
                     <Flex justify="between" align="center">
@@ -257,7 +259,7 @@ export const ReportTraceModal = ({ open, onClose }: ReportTraceModalProps) => {
                         <Copy />
                       </Button>
                     </Flex>
-                  </div>
+                  </button>
                 ))}
               </Stack>
             )}
diff --git a/web/packages/studio/src/components/SafeSynthesizerFilesetPreview/FilesetFilePreviewLink.tsx b/web/packages/studio/src/components/SafeSynthesizerFilesetPreview/FilesetFilePreviewLink.tsx
index b12e27741b..238ca1e215 100644
--- a/web/packages/studio/src/components/SafeSynthesizerFilesetPreview/FilesetFilePreviewLink.tsx
+++ b/web/packages/studio/src/components/SafeSynthesizerFilesetPreview/FilesetFilePreviewLink.tsx
@@ -5,7 +5,7 @@ import { parseFilesetUrl } from '@nemo/common/src/components/DatasetFileSelect/u
 import { ScrollTable } from '@nemo/common/src/components/ScrollTable';
 import { useFilesDownloadFile } from '@nemo/sdk/generated/platform/api';
 import {
-  Anchor,
+  Button,
   CodeSnippet,
   type TableColumnDefinition,
   type TableRowDefinition,
@@ -132,20 +132,13 @@ export const FilesetFilePreviewLink: FC<FilesetFilePreviewLinkProps> = ({ url, c
         </FilePreview>
       )}
 
-      <Anchor
-        role="button"
-        tabIndex={0}
+      <Button
+        kind="tertiary"
         onClick={handlePreviewClick}
-        onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            handlePreviewClick();
-          }
-        }}
-        className="truncate max-w-full cursor-pointer"
+        className="truncate max-w-full text-left p-0 h-auto"
       >
         {children}
-      </Anchor>
+      </Button>
     </>
   );
 };
diff --git a/web/packages/studio/src/routes/FilesetDetailRoute/DatasetSchemaEditor/index.test.tsx b/web/packages/studio/src/routes/FilesetDetailRoute/DatasetSchemaEditor/index.test.tsx
index e746a66b46..e496298994 100644
--- a/web/packages/studio/src/routes/FilesetDetailRoute/DatasetSchemaEditor/index.test.tsx
+++ b/web/packages/studio/src/routes/FilesetDetailRoute/DatasetSchemaEditor/index.test.tsx
@@ -44,6 +44,7 @@ vi.mock('@nemo/common/src/components/CodeEditor', () => ({
   CodeEditor: ({ content, onChange }: { content: string; onChange?: (next: string) => void }) => (
     <textarea
       data-testid="code-editor"
+      aria-label="code editor"
       value={content}
       onChange={(e) => onChange?.(e.target.value)}
     />
diff --git a/web/packages/studio/src/tests/util/mockStudioDataView.tsx b/web/packages/studio/src/tests/util/mockStudioDataView.tsx
index b8415842ab..08bbd869a9 100644
--- a/web/packages/studio/src/tests/util/mockStudioDataView.tsx
+++ b/web/packages/studio/src/tests/util/mockStudioDataView.tsx
@@ -115,7 +115,7 @@ function MockRowActionsCell<DataType>({
         Actions
       </button>
       {open ? (
-        <ul role="menu">
+        <ul>
           {items.map((item, i) => {
             if (item.kind === 'divider') {
               return <li key={i} />;

From 1717beadd786bfc18536d4d1e47c2ad4d3f6a6bc Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Wed, 24 Jun 2026 17:01:51 -0700
Subject: [PATCH 03/16] fix: resolve nested button and checkbox label
 association

- ReportTraceModal: restructure trace card to use sibling button + copy
  button instead of nested <button> inside <button>
- AdvancedParameters: restore click-to-toggle on checkbox labels by using
  htmlFor/id association instead of aria-labelledby

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 .../src/components/ReportTraceModal/index.tsx | 33 +++++++++----------
 .../components/AdvancedParameters.tsx         | 12 ++++---
 2 files changed, 23 insertions(+), 22 deletions(-)

diff --git a/web/packages/studio/src/components/ReportTraceModal/index.tsx b/web/packages/studio/src/components/ReportTraceModal/index.tsx
index 0de77e7c0d..47b95c67cc 100644
--- a/web/packages/studio/src/components/ReportTraceModal/index.tsx
+++ b/web/packages/studio/src/components/ReportTraceModal/index.tsx
@@ -223,14 +223,18 @@ export const ReportTraceModal = ({ open, onClose }: ReportTraceModalProps) => {
             {traces.length > 0 && (
               <Stack gap="density-sm" className="overflow-auto flex-1">
                 {traces.map((trace) => (
-                  <button
-                    type="button"
+                  <Flex
                     key={trace.id}
-                    className="p-3 bg-surface-raised rounded-md border border-base cursor-pointer w-full text-left appearance-none focus:outline-none focus:ring-2 focus:ring-brand"
-                    aria-label={`View details for ${trace.message}`}
-                    onClick={() => handleViewDetails(trace)}
+                    justify="between"
+                    align="center"
+                    className="p-3 bg-surface-raised rounded-md border border-base"
                   >
-                    <Flex justify="between" align="center">
+                    <button
+                      type="button"
+                      className="flex-1 text-left cursor-pointer appearance-none focus:outline-none focus:ring-2 focus:ring-brand"
+                      aria-label={`View details for ${trace.message}`}
+                      onClick={() => handleViewDetails(trace)}
+                    >
                       <Stack gap="density-xs">
                         <Flex gap="density-sm" align="center">
                           <Badge color={getSeverityColor(trace.severity)}>
@@ -248,18 +252,11 @@ export const ReportTraceModal = ({ open, onClose }: ReportTraceModalProps) => {
                           </Text>
                         )}
                       </Stack>
-                      <Button
-                        kind="tertiary"
-                        size="small"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          handleCopyTrace(trace);
-                        }}
-                      >
-                        <Copy />
-                      </Button>
-                    </Flex>
-                  </button>
+                    </button>
+                    <Button kind="tertiary" size="small" onClick={() => handleCopyTrace(trace)}>
+                      <Copy />
+                    </Button>
+                  </Flex>
                 ))}
               </Stack>
             )}
diff --git a/web/packages/studio/src/routes/SafeSynthesizerNewRoute/components/AdvancedParameters.tsx b/web/packages/studio/src/routes/SafeSynthesizerNewRoute/components/AdvancedParameters.tsx
index 3f23986cbb..6007408826 100644
--- a/web/packages/studio/src/routes/SafeSynthesizerNewRoute/components/AdvancedParameters.tsx
+++ b/web/packages/studio/src/routes/SafeSynthesizerNewRoute/components/AdvancedParameters.tsx
@@ -218,7 +218,6 @@ export const AdvancedParameters = () => {
             <div className="flex-1">
               <Flex gap="density-sm" direction="row" align="center">
                 <Checkbox
-                  aria-labelledby="auto-sampling-label"
                   checked={useAutomaticSampling}
                   onCheckedChange={async (checked) => {
                     setValue(
@@ -227,8 +226,11 @@ export const AdvancedParameters = () => {
                     );
                     await trigger('spec.config.training.num_input_records_to_sample');
                   }}
+                  attributes={{
+                    CheckboxInput: { id: 'auto-sampling' },
+                  }}
                 />
-                <span id="auto-sampling-label">Use Automatic Sampling</span>
+                <label htmlFor="auto-sampling">Use Automatic Sampling</label>
               </Flex>
             </div>
           </Flex>
@@ -299,7 +301,6 @@ export const AdvancedParameters = () => {
           <div className="flex-1">
             <Flex gap="density-sm" direction="row" align="center">
               <Checkbox
-                aria-labelledby="auto-scaling-label"
                 checked={useAutomaticScaling}
                 onCheckedChange={(checked) => {
                   if (checked) {
@@ -308,8 +309,11 @@ export const AdvancedParameters = () => {
                     setValue('spec.config.training.rope_scaling_factor', 1);
                   }
                 }}
+                attributes={{
+                  CheckboxInput: { id: 'auto-scaling' },
+                }}
               />
-              <span id="auto-scaling-label">Use Automatic Scaling</span>
+              <label htmlFor="auto-scaling">Use Automatic Scaling</label>
             </Flex>
           </div>
         </Flex>

From 35604269a7b97bc5ed91c33ac8449a988612201a Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Wed, 24 Jun 2026 20:56:49 -0700
Subject: [PATCH 04/16] revert: restore aria-labelledby for checkboxes to
 satisfy label-has-for

The htmlFor/label form triggers the deprecated jsx-a11y/label-has-for rule
(requires both nesting AND id), pushing warnings to 26 > 24 ceiling.
Revert to aria-labelledby+span which satisfies label-has-associated-control
without firing label-has-for. Trade-off: clicking label text doesn't toggle.

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 .../components/AdvancedParameters.tsx                | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/web/packages/studio/src/routes/SafeSynthesizerNewRoute/components/AdvancedParameters.tsx b/web/packages/studio/src/routes/SafeSynthesizerNewRoute/components/AdvancedParameters.tsx
index 6007408826..3f23986cbb 100644
--- a/web/packages/studio/src/routes/SafeSynthesizerNewRoute/components/AdvancedParameters.tsx
+++ b/web/packages/studio/src/routes/SafeSynthesizerNewRoute/components/AdvancedParameters.tsx
@@ -218,6 +218,7 @@ export const AdvancedParameters = () => {
             <div className="flex-1">
               <Flex gap="density-sm" direction="row" align="center">
                 <Checkbox
+                  aria-labelledby="auto-sampling-label"
                   checked={useAutomaticSampling}
                   onCheckedChange={async (checked) => {
                     setValue(
@@ -226,11 +227,8 @@ export const AdvancedParameters = () => {
                     );
                     await trigger('spec.config.training.num_input_records_to_sample');
                   }}
-                  attributes={{
-                    CheckboxInput: { id: 'auto-sampling' },
-                  }}
                 />
-                <label htmlFor="auto-sampling">Use Automatic Sampling</label>
+                <span id="auto-sampling-label">Use Automatic Sampling</span>
               </Flex>
             </div>
           </Flex>
@@ -301,6 +299,7 @@ export const AdvancedParameters = () => {
           <div className="flex-1">
             <Flex gap="density-sm" direction="row" align="center">
               <Checkbox
+                aria-labelledby="auto-scaling-label"
                 checked={useAutomaticScaling}
                 onCheckedChange={(checked) => {
                   if (checked) {
@@ -309,11 +308,8 @@ export const AdvancedParameters = () => {
                     setValue('spec.config.training.rope_scaling_factor', 1);
                   }
                 }}
-                attributes={{
-                  CheckboxInput: { id: 'auto-scaling' },
-                }}
               />
-              <label htmlFor="auto-scaling">Use Automatic Scaling</label>
+              <span id="auto-scaling-label">Use Automatic Scaling</span>
             </Flex>
           </div>
         </Flex>

From 340fe174cb0e27157ee6e1be3a3f352c730b59ad Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Wed, 24 Jun 2026 21:24:17 -0700
Subject: [PATCH 05/16] fix: address remaining a11y review nits

- SimpleFilesTable: replace document.getElementById with useRef on file input
- FileTag: gate focusable <button> when onNoFileClick is undefined
- update-max-warnings-a11y.ts: use bare eslint command, guard stdout before parse

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 .../common/scripts/update-max-warnings-a11y.ts         |  9 +++++++--
 .../src/components/UploadModal/SimpleFilesTable.tsx    |  9 +++++----
 web/packages/studio/src/components/FileTag/index.tsx   | 10 ++++------
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/web/packages/common/scripts/update-max-warnings-a11y.ts b/web/packages/common/scripts/update-max-warnings-a11y.ts
index de8e05fcc8..bf09abaadf 100644
--- a/web/packages/common/scripts/update-max-warnings-a11y.ts
+++ b/web/packages/common/scripts/update-max-warnings-a11y.ts
@@ -15,11 +15,16 @@ const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8')) as {
 let output: string;
 try {
   output = execSync(
-    'pnpm exec eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --format json',
+    'eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --format json',
     { encoding: 'utf8' }
   );
 } catch (e) {
-  output = (e as { stdout: string }).stdout;
+  const stdout = (e as { stdout: string }).stdout;
+  if (!stdout) {
+    console.error('eslint failed to produce output');
+    process.exit(1);
+  }
+  output = stdout;
 }
 
 const results: Array<{ warningCount: number }> = JSON.parse(output);
diff --git a/web/packages/common/src/components/UploadModal/SimpleFilesTable.tsx b/web/packages/common/src/components/UploadModal/SimpleFilesTable.tsx
index f40076ebda..dc1ff44a37 100644
--- a/web/packages/common/src/components/UploadModal/SimpleFilesTable.tsx
+++ b/web/packages/common/src/components/UploadModal/SimpleFilesTable.tsx
@@ -19,11 +19,12 @@ import {
   RadioGroupInput,
 } from '@nvidia/foundations-react-core';
 import { CircleAlert } from 'lucide-react';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
 
 export const SimpleFilesTable = () => {
   const [state, dispatch] = useUploadModalContext();
   const { trailingButton } = useInlinePickerSlot();
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const {
     files,
     selectedFiles,
@@ -184,7 +185,7 @@ export const SimpleFilesTable = () => {
           <Button
             kind="tertiary"
             onClick={() => {
-              document.getElementById('upload-more-files')?.click();
+              fileInputRef.current?.click();
             }}
           >
             Upload More Files
@@ -195,14 +196,14 @@ export const SimpleFilesTable = () => {
         <Button
           kind="tertiary"
           onClick={() => {
-            document.getElementById('upload-more-files')?.click();
+            fileInputRef.current?.click();
           }}
         >
           Upload More Files
         </Button>
       )}
       <input
-        id="upload-more-files"
+        ref={fileInputRef}
         type="file"
         multiple
         onChange={handleFileChange}
diff --git a/web/packages/studio/src/components/FileTag/index.tsx b/web/packages/studio/src/components/FileTag/index.tsx
index a324985966..1b602bb16a 100644
--- a/web/packages/studio/src/components/FileTag/index.tsx
+++ b/web/packages/studio/src/components/FileTag/index.tsx
@@ -63,14 +63,12 @@ export const FileTag: FC<FileTagProps> = ({
           <Flex gap="density-sm">{fileName}</Flex>
           {onClick && <X />}
         </Tag>
-      ) : (
-        <button
-          type="button"
-          onClick={onNoFileClick}
-          className={onNoFileClick ? 'cursor-pointer' : undefined}
-        >
+      ) : onNoFileClick ? (
+        <button type="button" onClick={onNoFileClick} className="cursor-pointer">
           {missingFileNameChip}
         </button>
+      ) : (
+        <div>{missingFileNameChip}</div>
       )}
     </Flex>
   );

From 7d4d0fdc1015f8ba5d3de70085549dc84e3ec9da Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Thu, 25 Jun 2026 09:56:00 -0700
Subject: [PATCH 06/16] fix: align SimpleFilesTable tests with ref-based file
 input
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Match aria-label casing: 'Upload More Files' → 'Upload more files'
- Remove id assertion (input now uses useRef, no id attribute)

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 .../src/components/UploadModal/SimpleFilesTable.test.tsx   | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/web/packages/common/src/components/UploadModal/SimpleFilesTable.test.tsx b/web/packages/common/src/components/UploadModal/SimpleFilesTable.test.tsx
index f839793c4b..47825486fe 100644
--- a/web/packages/common/src/components/UploadModal/SimpleFilesTable.test.tsx
+++ b/web/packages/common/src/components/UploadModal/SimpleFilesTable.test.tsx
@@ -377,7 +377,7 @@ describe('SimpleFilesTable', () => {
         }),
       });
 
-      const fileInput = screen.getByLabelText('Upload More Files', {
+      const fileInput = screen.getByLabelText('Upload more files', {
         selector: 'input',
       }) as HTMLInputElement;
       expect(fileInput).toHaveClass('sr-only');
@@ -392,7 +392,7 @@ describe('SimpleFilesTable', () => {
         wrapper: createWrapper({ files: mockNewFiles }, mockDispatch),
       });
 
-      const fileInput = screen.getByLabelText('Upload More Files', {
+      const fileInput = screen.getByLabelText('Upload more files', {
         selector: 'input',
       }) as HTMLInputElement;
       const newFile = new File(['new content'], 'newfile.jsonl');
@@ -416,11 +416,10 @@ describe('SimpleFilesTable', () => {
         wrapper: createWrapper({ files: mockNewFiles }),
       });
 
-      const fileInput = screen.getByLabelText('Upload More Files', {
+      const fileInput = screen.getByLabelText('Upload more files', {
         selector: 'input',
       });
 
-      expect(fileInput).toHaveAttribute('id', 'upload-more-files');
       expect(fileInput).toHaveAttribute('type', 'file');
     });
   });

From 71f1cc05c850e0b3d794c05c78b1361c09f17480 Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Thu, 25 Jun 2026 10:36:54 -0700
Subject: [PATCH 07/16] fix(a11y): repair unit tests broken by role/handler
 changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The a11y refactors (role=button→button, role=img→aria-hidden, role=form
removal, label→ref upload input) left 13 unit tests asserting roles and
handlers that no longer exist. Realign them with the refactored markup:

- StudioDataView.test: mock TableContent attaches the row-click delegation
  handler via a ref callback (native onclick) instead of a JSX onClick prop,
  so cell/sub-row click tests pass without re-tripping jsx-a11y on the
  test-only <table>; keyboard tests use userEvent (native <button> activates
  on Enter/Space, which fireEvent.keyDown does not simulate); link query
  matches the renamed 'View' text.
- StatusBadge.test: query the decorative icon by its lucide class instead of
  getByRole('img') (icon is now aria-hidden).
- NewCustomizationForm: give the <form> an accessible name so it exposes a
  form role again; restores getByRole('form') in create-a-customization.test.

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 .../DataView/StudioDataView.test.tsx          | 35 ++++++++++++++-----
 .../StatusBadge/StatusBadge.test.tsx          | 14 ++++----
 .../components/NewCustomizationForm/index.tsx |  6 +++-
 .../src/tests/create-a-customization.test.tsx |  3 +-
 4 files changed, 40 insertions(+), 18 deletions(-)

diff --git a/web/packages/common/src/components/DataView/StudioDataView.test.tsx b/web/packages/common/src/components/DataView/StudioDataView.test.tsx
index b913437640..2c29b0778e 100644
--- a/web/packages/common/src/components/DataView/StudioDataView.test.tsx
+++ b/web/packages/common/src/components/DataView/StudioDataView.test.tsx
@@ -3,6 +3,7 @@
 
 import { StudioDataView } from '@nemo/common/src/components/DataView/StudioDataView';
 import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 vi.mock('@nvidia/foundations-react-core', () => ({
   Block: ({ children }: React.PropsWithChildren) => <div>{children}</div>,
@@ -152,12 +153,22 @@ vi.mock('@nemo/common/src/components/DataView/internal', () => ({
   },
   TableContent: ({
     className,
+    onClick,
   }: {
     className?: string;
     onClick?: React.MouseEventHandler;
-    onKeyDown?: React.KeyboardEventHandler;
   }) => (
-    <table className={className}>
+    // Attach the delegation handler via a ref callback rather than a JSX onClick
+    // prop, so jsx-a11y doesn't flag this test-only non-interactive <table>.
+    // Production attaches the handler to the real TableContent component.
+    <table
+      className={className}
+      ref={(el) => {
+        if (el) {
+          el.onclick = onClick ? (onClick as unknown as (e: MouseEvent) => void) : null;
+        }
+      }}
+    >
       <tbody>
         {mockRenderedRows.map((cells, rowIdx) => (
           <tr key={rowIdx} data-index={rowIdx}>
@@ -289,7 +300,7 @@ describe('StudioDataView', () => {
       const onRowClick = vi.fn();
       render(<StudioDataView {...defaultProps} onRowClick={onRowClick} />);
 
-      fireEvent.click(screen.getByRole('link', { name: 'Link Bob' }));
+      fireEvent.click(screen.getByRole('link', { name: 'View Bob' }));
 
       expect(onRowClick).not.toHaveBeenCalled();
     });
@@ -337,22 +348,26 @@ describe('StudioDataView', () => {
       expect(targets).toHaveLength(0);
     });
 
-    it('should call onRowClick when Enter is pressed on a keyboard target', () => {
+    it('should call onRowClick when Enter is pressed on a keyboard target', async () => {
+      const user = userEvent.setup();
       const onRowClick = vi.fn();
       render(<StudioDataView {...defaultProps} onRowClick={onRowClick} />);
 
       const targets = screen.getAllByRole('button', { name: 'Open row' });
-      fireEvent.keyDown(targets[0], { key: 'Enter' });
+      targets[0].focus();
+      await user.keyboard('{Enter}');
 
       expect(onRowClick).toHaveBeenCalledWith(testData[0], 0);
     });
 
-    it('should call onRowClick when Space is pressed on a keyboard target', () => {
+    it('should call onRowClick when Space is pressed on a keyboard target', async () => {
+      const user = userEvent.setup();
       const onRowClick = vi.fn();
       render(<StudioDataView {...defaultProps} onRowClick={onRowClick} />);
 
       const targets = screen.getAllByRole('button', { name: 'Open row' });
-      fireEvent.keyDown(targets[1], { key: ' ' });
+      targets[1].focus();
+      await user.keyboard(' ');
 
       expect(onRowClick).toHaveBeenCalledWith(testData[1], 1);
     });
@@ -465,12 +480,14 @@ describe('StudioDataView', () => {
       expect(onRowClick).toHaveBeenCalledWith(dataWithSubRows[0].subRows![0], 0);
     });
 
-    it('should resolve a sub-row correctly on keyboard activation', () => {
+    it('should resolve a sub-row correctly on keyboard activation', async () => {
+      const user = userEvent.setup();
       const onRowClick = vi.fn();
       render(<StudioDataView {...subRowProps} onRowClick={onRowClick} />);
 
       const targets = screen.getAllByRole('button', { name: 'Open row' });
-      fireEvent.keyDown(targets[1], { key: 'Enter' });
+      targets[1].focus();
+      await user.keyboard('{Enter}');
 
       // Same index semantic as click: parent's top-level data position
       expect(onRowClick).toHaveBeenCalledWith(dataWithSubRows[0].subRows![0], 0);
diff --git a/web/packages/common/src/components/StatusBadge/StatusBadge.test.tsx b/web/packages/common/src/components/StatusBadge/StatusBadge.test.tsx
index 343abc1016..66995e82c1 100644
--- a/web/packages/common/src/components/StatusBadge/StatusBadge.test.tsx
+++ b/web/packages/common/src/components/StatusBadge/StatusBadge.test.tsx
@@ -4,14 +4,13 @@
 import { BadgeStatus, badgeStatus } from '@nemo/common/src/components/StatusBadge/badgeStatus';
 import { StatusBadge } from '@nemo/common/src/components/StatusBadge/index';
 import * as customQueries from '@nemo/common/src/tests/customQueries';
-import { queries, render, screen, within } from '@testing-library/react';
+import { queries, render, screen } from '@testing-library/react';
 import { CircleCheck } from 'lucide-react';
 
 const allQueries = {
   ...queries,
   ...customQueries,
 };
-const customScreen = within(document.body, allQueries);
 
 describe('StatusBadge component', () => {
   beforeEach(() => {
@@ -84,8 +83,9 @@ describe('StatusBadge component', () => {
       expect(badge).toBeInTheDocument();
       expect(badge).toHaveTextContent(expectedBadge.label);
 
-      // Check if icon is rendered when icon exists
-      const icon = customScreen.getByRole('img');
+      // Icon is a decorative svg (aria-hidden), so query the lucide class directly
+      // eslint-disable-next-line testing-library/no-node-access
+      const icon = document.querySelector('.lucide');
       expect(icon).toBeInTheDocument();
 
       unmount();
@@ -159,12 +159,14 @@ describe('StatusBadge component', () => {
 
     it('renders icon when config entry has one', () => {
       render(<StatusBadge status="success" statusConfig={STATUS_CONFIG} />);
-      expect(screen.getByRole('img')).toBeInTheDocument();
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(document.querySelector('.lucide-circle-check')).toBeInTheDocument();
     });
 
     it('renders no icon when config entry omits one', () => {
       render(<StatusBadge status="error" statusConfig={STATUS_CONFIG} />);
-      expect(screen.queryByRole('img')).not.toBeInTheDocument();
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(document.querySelector('.lucide')).not.toBeInTheDocument();
     });
 
     it('falls back to provided fallback for unknown status', () => {
diff --git a/web/packages/studio/src/components/NewCustomizationForm/index.tsx b/web/packages/studio/src/components/NewCustomizationForm/index.tsx
index 44bbee2db9..4046eae258 100644
--- a/web/packages/studio/src/components/NewCustomizationForm/index.tsx
+++ b/web/packages/studio/src/components/NewCustomizationForm/index.tsx
@@ -206,7 +206,11 @@ export const NewCustomizationForm: FC = () => {
         slotDescription="Select a model, choose your data, set your parameters and start training in seconds."
       />
       <FormProvider {...form}>
-        <form className="w-full" onSubmit={handleSubmit(trainCustomModel)}>
+        <form
+          className="w-full"
+          aria-label="Fine-tune a Model"
+          onSubmit={handleSubmit(trainCustomModel)}
+        >
           <Stack className="overflow-auto" gap="density-2xl" padding="density-2xl">
             <Flex align="center" justify="center" className="w-full">
               <Panel
diff --git a/web/packages/studio/src/tests/create-a-customization.test.tsx b/web/packages/studio/src/tests/create-a-customization.test.tsx
index c4aea4b123..09146e69cd 100644
--- a/web/packages/studio/src/tests/create-a-customization.test.tsx
+++ b/web/packages/studio/src/tests/create-a-customization.test.tsx
@@ -118,8 +118,7 @@ describe('Creating a new customization', () => {
       await user.clear(outputModelInput);
       await user.type(outputModelInput, 'test-customization-model');
 
-      const form = screen.getByRole('form');
-      fireEvent.submit(form);
+      fireEvent.submit(screen.getByRole('form'));
 
       // Assert the correct request was made
       await waitFor(() => {

From 54384fdf9aa2e3a854c861bc474d70746d5f5a3e Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Thu, 25 Jun 2026 11:07:34 -0700
Subject: [PATCH 08/16] fix(a11y): drop deprecated rules, convert article role,
 lower ceilings

- eslint.config.a11y.js: enable only non-deprecated jsx-a11y rules (filter
  meta.deprecated). accessible-emoji and no-onchange are deprecated by
  jsx-a11y 6.10.2 (latest) and produce false positives; excluding them is
  the version-aware fix.
- IntakeAnnotationsPanel: <div role="article"> -> <article>.
- CustomFilesetForm: remove autoFocus on the page-load name field
  (non-modal autofocus).
- Ratchet lint:a11y ceilings: common 6->4, studio 24->20.

Remaining warnings are intentional modal autofocus and legitimate ARIA on
custom widgets (listbox/option/dialog/separator), where converting to native
tags would regress behavior.

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 web/eslint.config.a11y.js                                  | 7 ++++++-
 web/packages/common/package.json                           | 2 +-
 web/packages/studio/package.json                           | 2 +-
 .../src/routes/FilesetNewRoute/CustomFilesetForm.tsx       | 1 -
 4 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/eslint.config.a11y.js b/web/eslint.config.a11y.js
index c97efaf2dc..5f3f5fa554 100644
--- a/web/eslint.config.a11y.js
+++ b/web/eslint.config.a11y.js
@@ -21,8 +21,13 @@ export default [
       'jsx-a11y': jsxA11yPlugin,
     },
     rules: {
+      // Enable every non-deprecated jsx-a11y rule as a warning. Deprecated rules
+      // (e.g. accessible-emoji, no-onchange) are excluded — jsx-a11y no longer
+      // maintains them and they produce false positives.
       ...Object.fromEntries(
-        Object.keys(jsxA11yPlugin.rules).map((rule) => [`jsx-a11y/${rule}`, 'warn'])
+        Object.entries(jsxA11yPlugin.rules)
+          .filter(([, rule]) => !rule.meta?.deprecated)
+          .map(([rule]) => [`jsx-a11y/${rule}`, 'warn'])
       ),
     },
   },
diff --git a/web/packages/common/package.json b/web/packages/common/package.json
index c9998af2c1..972543e32c 100644
--- a/web/packages/common/package.json
+++ b/web/packages/common/package.json
@@ -10,7 +10,7 @@
     "format:fix": "prettier --write './**/*.{js,jsx,ts,tsx}'",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --fix --report-unused-disable-directives --max-warnings 0",
-    "lint:a11y": "eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --max-warnings 6",
+    "lint:a11y": "eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --max-warnings 4",
     "update-warning-count:a11y": "tsx scripts/update-max-warnings-a11y.ts",
     "test": "vitest --run",
     "test:ci": "vitest run --coverage",
diff --git a/web/packages/studio/package.json b/web/packages/studio/package.json
index 6b3e6a69af..7f2582d243 100644
--- a/web/packages/studio/package.json
+++ b/web/packages/studio/package.json
@@ -17,7 +17,7 @@
     "dev:preview": "pnpm build:dev && vite preview",
     "lint": "eslint . --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --fix --report-unused-disable-directives --max-warnings 0",
-    "lint:a11y": "eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --max-warnings 24",
+    "lint:a11y": "eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --max-warnings 20",
     "update-warning-count:a11y": "pnpm tsx ../common/scripts/update-max-warnings-a11y.ts",
     "format": "prettier --check './**/*.{js,jsx,ts,tsx}'",
     "format:fix": "prettier --write './**/*.{js,jsx,ts,tsx}'",
diff --git a/web/packages/studio/src/routes/FilesetNewRoute/CustomFilesetForm.tsx b/web/packages/studio/src/routes/FilesetNewRoute/CustomFilesetForm.tsx
index ec3525a7d1..ba0c110662 100644
--- a/web/packages/studio/src/routes/FilesetNewRoute/CustomFilesetForm.tsx
+++ b/web/packages/studio/src/routes/FilesetNewRoute/CustomFilesetForm.tsx
@@ -80,7 +80,6 @@ export const CustomFilesetForm: FC<CustomFilesetFormProps> = ({
             <ControlledTextInput
               label="Fileset Name"
               disabled={isSubmitPending}
-              autoFocus
               useControllerProps={{
                 name: 'name',
                 control,

From 4ef36a0e337de42d18d7cade1e09244421de7eab Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Thu, 25 Jun 2026 11:10:55 -0700
Subject: [PATCH 09/16] chore(a11y): trim verbose comments

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 web/eslint.config.a11y.js                                     | 4 +---
 .../common/src/components/DataView/StudioDataView.test.tsx    | 4 +---
 .../common/src/components/StatusBadge/StatusBadge.test.tsx    | 1 -
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/web/eslint.config.a11y.js b/web/eslint.config.a11y.js
index 5f3f5fa554..a1fc8ddb89 100644
--- a/web/eslint.config.a11y.js
+++ b/web/eslint.config.a11y.js
@@ -21,9 +21,7 @@ export default [
       'jsx-a11y': jsxA11yPlugin,
     },
     rules: {
-      // Enable every non-deprecated jsx-a11y rule as a warning. Deprecated rules
-      // (e.g. accessible-emoji, no-onchange) are excluded — jsx-a11y no longer
-      // maintains them and they produce false positives.
+      // All non-deprecated jsx-a11y rules as warnings.
       ...Object.fromEntries(
         Object.entries(jsxA11yPlugin.rules)
           .filter(([, rule]) => !rule.meta?.deprecated)
diff --git a/web/packages/common/src/components/DataView/StudioDataView.test.tsx b/web/packages/common/src/components/DataView/StudioDataView.test.tsx
index 2c29b0778e..add894b9fc 100644
--- a/web/packages/common/src/components/DataView/StudioDataView.test.tsx
+++ b/web/packages/common/src/components/DataView/StudioDataView.test.tsx
@@ -158,9 +158,7 @@ vi.mock('@nemo/common/src/components/DataView/internal', () => ({
     className?: string;
     onClick?: React.MouseEventHandler;
   }) => (
-    // Attach the delegation handler via a ref callback rather than a JSX onClick
-    // prop, so jsx-a11y doesn't flag this test-only non-interactive <table>.
-    // Production attaches the handler to the real TableContent component.
+    // ref (not JSX onClick) so jsx-a11y doesn't flag the test-only <table>
     <table
       className={className}
       ref={(el) => {
diff --git a/web/packages/common/src/components/StatusBadge/StatusBadge.test.tsx b/web/packages/common/src/components/StatusBadge/StatusBadge.test.tsx
index 66995e82c1..2f1e120788 100644
--- a/web/packages/common/src/components/StatusBadge/StatusBadge.test.tsx
+++ b/web/packages/common/src/components/StatusBadge/StatusBadge.test.tsx
@@ -83,7 +83,6 @@ describe('StatusBadge component', () => {
       expect(badge).toBeInTheDocument();
       expect(badge).toHaveTextContent(expectedBadge.label);
 
-      // Icon is a decorative svg (aria-hidden), so query the lucide class directly
       // eslint-disable-next-line testing-library/no-node-access
       const icon = document.querySelector('.lucide');
       expect(icon).toBeInTheDocument();

From 653750a897570cdd1f133a92b8eb6762d20c10e1 Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Thu, 25 Jun 2026 11:39:28 -0700
Subject: [PATCH 10/16] fix(a11y): use KUI Button instead of native button for
 clickable regions

Wrapping content in a raw <button> bypasses KUI's focus/styling tokens.
Use the KUI Button primitive instead:
- ReportTraceModal: trace-card clickable -> <Button kind=tertiary> (copy
  button stays a sibling, no nesting).
- FileTag: no-file clickable -> <Button kind=tertiary>.

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 web/packages/studio/src/components/FileTag/index.tsx      | 6 +++---
 .../studio/src/components/ReportTraceModal/index.tsx      | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/web/packages/studio/src/components/FileTag/index.tsx b/web/packages/studio/src/components/FileTag/index.tsx
index 1b602bb16a..f58222b646 100644
--- a/web/packages/studio/src/components/FileTag/index.tsx
+++ b/web/packages/studio/src/components/FileTag/index.tsx
@@ -1,7 +1,7 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { Flex, Tag, TagProps } from '@nvidia/foundations-react-core';
+import { Button, Flex, Tag, TagProps } from '@nvidia/foundations-react-core';
 import { CircleCheck, X, RefreshCw, CircleAlert as ErrorIcon } from 'lucide-react';
 import { FC, ReactNode, MouseEventHandler } from 'react';
 
@@ -64,9 +64,9 @@ export const FileTag: FC<FileTagProps> = ({
           {onClick && <X />}
         </Tag>
       ) : onNoFileClick ? (
-        <button type="button" onClick={onNoFileClick} className="cursor-pointer">
+        <Button kind="tertiary" onClick={onNoFileClick} className="h-auto p-0">
           {missingFileNameChip}
-        </button>
+        </Button>
       ) : (
         <div>{missingFileNameChip}</div>
       )}
diff --git a/web/packages/studio/src/components/ReportTraceModal/index.tsx b/web/packages/studio/src/components/ReportTraceModal/index.tsx
index 47b95c67cc..079fe58717 100644
--- a/web/packages/studio/src/components/ReportTraceModal/index.tsx
+++ b/web/packages/studio/src/components/ReportTraceModal/index.tsx
@@ -229,9 +229,9 @@ export const ReportTraceModal = ({ open, onClose }: ReportTraceModalProps) => {
                     align="center"
                     className="p-3 bg-surface-raised rounded-md border border-base"
                   >
-                    <button
-                      type="button"
-                      className="flex-1 text-left cursor-pointer appearance-none focus:outline-none focus:ring-2 focus:ring-brand"
+                    <Button
+                      kind="tertiary"
+                      className="h-auto flex-1 justify-start p-0 text-left"
                       aria-label={`View details for ${trace.message}`}
                       onClick={() => handleViewDetails(trace)}
                     >
@@ -252,7 +252,7 @@ export const ReportTraceModal = ({ open, onClose }: ReportTraceModalProps) => {
                           </Text>
                         )}
                       </Stack>
-                    </button>
+                    </Button>
                     <Button kind="tertiary" size="small" onClick={() => handleCopyTrace(trace)}>
                       <Copy />
                     </Button>

From 95f5315dbe08437508d0663cced9f1b81b338dcf Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Thu, 25 Jun 2026 12:27:07 -0700
Subject: [PATCH 11/16] test(a11y): assert visible label instead of decorative
 icon in StatusBadge

The status icon is now aria-hidden (decorative), so querying it requires a
brittle .lucide class selector. Drop those icon-presence assertions and rely
on the visible badge label, which is the user-meaningful output.

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 .../components/StatusBadge/StatusBadge.test.tsx   | 15 ++-------------
 1 file changed, 2 insertions(+), 13 deletions(-)

diff --git a/web/packages/common/src/components/StatusBadge/StatusBadge.test.tsx b/web/packages/common/src/components/StatusBadge/StatusBadge.test.tsx
index 2f1e120788..2ce83a04a0 100644
--- a/web/packages/common/src/components/StatusBadge/StatusBadge.test.tsx
+++ b/web/packages/common/src/components/StatusBadge/StatusBadge.test.tsx
@@ -83,10 +83,6 @@ describe('StatusBadge component', () => {
       expect(badge).toBeInTheDocument();
       expect(badge).toHaveTextContent(expectedBadge.label);
 
-      // eslint-disable-next-line testing-library/no-node-access
-      const icon = document.querySelector('.lucide');
-      expect(icon).toBeInTheDocument();
-
       unmount();
     });
   });
@@ -156,16 +152,9 @@ describe('StatusBadge component', () => {
       expect(screen.getByTestId('nv-badge')).toHaveTextContent('Success');
     });
 
-    it('renders icon when config entry has one', () => {
-      render(<StatusBadge status="success" statusConfig={STATUS_CONFIG} />);
-      // eslint-disable-next-line testing-library/no-node-access
-      expect(document.querySelector('.lucide-circle-check')).toBeInTheDocument();
-    });
-
-    it('renders no icon when config entry omits one', () => {
+    it('renders the label for a config entry without an icon', () => {
       render(<StatusBadge status="error" statusConfig={STATUS_CONFIG} />);
-      // eslint-disable-next-line testing-library/no-node-access
-      expect(document.querySelector('.lucide')).not.toBeInTheDocument();
+      expect(screen.getByTestId('nv-badge')).toHaveTextContent('Error');
     });
 
     it('falls back to provided fallback for unknown status', () => {

From 2590a30b364a4bb05f3fecc6626c43e672b18d3e Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Thu, 25 Jun 2026 14:09:19 -0700
Subject: [PATCH 12/16] fix(a11y): address codex/coderabbit review nits

- update-max-warnings-a11y.ts: fail fast when the lint:a11y script has no
  --max-warnings flag, instead of silently no-op'ing while logging 'updated'.
- SimpleFilesTable: tabIndex={-1} on the sr-only file input so keyboard users
  don't hit an invisible duplicate upload control (the button triggers it via
  ref).

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 web/packages/common/scripts/update-max-warnings-a11y.ts    | 7 ++++++-
 .../common/src/components/UploadModal/SimpleFilesTable.tsx | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/web/packages/common/scripts/update-max-warnings-a11y.ts b/web/packages/common/scripts/update-max-warnings-a11y.ts
index bf09abaadf..d529c66a8b 100644
--- a/web/packages/common/scripts/update-max-warnings-a11y.ts
+++ b/web/packages/common/scripts/update-max-warnings-a11y.ts
@@ -38,7 +38,12 @@ if (!a11yScript) {
 }
 
 const maxWarningsRegex = /--max-warnings (\d+)/;
-const currentMax: number = parseInt(a11yScript.match(maxWarningsRegex)?.[1] || '0', 10);
+const maxWarningsMatch = a11yScript.match(maxWarningsRegex);
+if (!maxWarningsMatch) {
+  console.error('lint:a11y script is missing --max-warnings <number>');
+  process.exit(1);
+}
+const currentMax: number = parseInt(maxWarningsMatch[1], 10);
 
 if (warningCount !== currentMax) {
   pkg.scripts['lint:a11y'] = a11yScript.replace(maxWarningsRegex, `--max-warnings ${warningCount}`);
diff --git a/web/packages/common/src/components/UploadModal/SimpleFilesTable.tsx b/web/packages/common/src/components/UploadModal/SimpleFilesTable.tsx
index dc1ff44a37..08646e0ac5 100644
--- a/web/packages/common/src/components/UploadModal/SimpleFilesTable.tsx
+++ b/web/packages/common/src/components/UploadModal/SimpleFilesTable.tsx
@@ -206,6 +206,7 @@ export const SimpleFilesTable = () => {
         ref={fileInputRef}
         type="file"
         multiple
+        tabIndex={-1}
         onChange={handleFileChange}
         accept={acceptableFileTypes.join(',')}
         className="sr-only"

From 6e743848ca95c655095459c0f3234916e71054aa Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Thu, 25 Jun 2026 14:49:29 -0700
Subject: [PATCH 13/16] refactor(a11y): use ESLint Node API in
 update-max-warnings script

Replace the execSync('eslint ... --format json') subprocess + JSON parse +
catch-nonzero-exit handling with the ESLint class API (overrideConfigFile +
allowInlineConfig:false + lintFiles). Reads warningCount off the result
objects directly.

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 .../scripts/update-max-warnings-a11y.ts       | 81 +++++++++----------
 1 file changed, 40 insertions(+), 41 deletions(-)

diff --git a/web/packages/common/scripts/update-max-warnings-a11y.ts b/web/packages/common/scripts/update-max-warnings-a11y.ts
index d529c66a8b..c57a47612b 100644
--- a/web/packages/common/scripts/update-max-warnings-a11y.ts
+++ b/web/packages/common/scripts/update-max-warnings-a11y.ts
@@ -2,55 +2,54 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
-import { execSync } from 'child_process';
+import { ESLint } from 'eslint';
 import fs from 'fs';
 import path from 'path';
 
-const pkgPath = path.resolve(process.cwd(), 'package.json');
-const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8')) as {
-  scripts: Record<string, string>;
-};
+async function main() {
+  const pkgPath = path.resolve(process.cwd(), 'package.json');
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8')) as {
+    scripts: Record<string, string>;
+  };
 
-// Run ESLint with the a11y config and capture JSON output
-let output: string;
-try {
-  output = execSync(
-    'eslint . --config ../../eslint.config.a11y.js --no-config-lookup --no-inline-config --format json',
-    { encoding: 'utf8' }
-  );
-} catch (e) {
-  const stdout = (e as { stdout: string }).stdout;
-  if (!stdout) {
-    console.error('eslint failed to produce output');
+  const a11yScript: string = pkg.scripts['lint:a11y'];
+  if (!a11yScript) {
+    console.error('No lint:a11y script found in package.json');
     process.exit(1);
   }
-  output = stdout;
-}
 
-const results: Array<{ warningCount: number }> = JSON.parse(output);
-const warningCount: number = results.reduce((sum, file) => sum + file.warningCount, 0);
+  const maxWarningsRegex = /--max-warnings (\d+)/;
+  const maxWarningsMatch = a11yScript.match(maxWarningsRegex);
+  if (!maxWarningsMatch) {
+    console.error('lint:a11y script is missing --max-warnings <number>');
+    process.exit(1);
+  }
+  const currentMax: number = parseInt(maxWarningsMatch[1], 10);
 
-// Find current max-warnings in lint:a11y script
-const a11yScript: string = pkg.scripts['lint:a11y'];
-if (!a11yScript) {
-  console.error('No lint:a11y script found in package.json');
-  process.exit(1);
-}
+  // Lint via the ESLint Node API using the a11y flat config only, with inline
+  // directives ignored (mirrors `--config ... --no-config-lookup --no-inline-config`).
+  const eslint = new ESLint({
+    overrideConfigFile: path.resolve(process.cwd(), '../../eslint.config.a11y.js'),
+    allowInlineConfig: false,
+  });
+  const results = await eslint.lintFiles(['.']);
+  const warningCount: number = results.reduce((sum, result) => sum + result.warningCount, 0);
 
-const maxWarningsRegex = /--max-warnings (\d+)/;
-const maxWarningsMatch = a11yScript.match(maxWarningsRegex);
-if (!maxWarningsMatch) {
-  console.error('lint:a11y script is missing --max-warnings <number>');
-  process.exit(1);
+  if (warningCount !== currentMax) {
+    pkg.scripts['lint:a11y'] = a11yScript.replace(
+      maxWarningsRegex,
+      `--max-warnings ${warningCount}`
+    );
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
+    // eslint-disable-next-line no-console
+    console.log(`Updated lint:a11y max-warnings from ${currentMax} to ${warningCount}`);
+  } else {
+    // eslint-disable-next-line no-console
+    console.log(`No update needed. Current warnings: ${warningCount}, max-warnings: ${currentMax}`);
+  }
 }
-const currentMax: number = parseInt(maxWarningsMatch[1], 10);
 
-if (warningCount !== currentMax) {
-  pkg.scripts['lint:a11y'] = a11yScript.replace(maxWarningsRegex, `--max-warnings ${warningCount}`);
-  fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
-  // eslint-disable-next-line no-console
-  console.log(`Updated lint:a11y max-warnings from ${currentMax} to ${warningCount}`);
-} else {
-  // eslint-disable-next-line no-console
-  console.log(`No update needed. Current warnings: ${warningCount}, max-warnings: ${currentMax}`);
-}
+main().catch((err) => {
+  console.error(err);
+  process.exit(1);
+});

From 3419e743bab200d20bf126366d97f372ad3e766e Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Thu, 25 Jun 2026 15:08:58 -0700
Subject: [PATCH 14/16] chore(a11y): trim comment in update-max-warnings script

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 web/packages/common/scripts/update-max-warnings-a11y.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/web/packages/common/scripts/update-max-warnings-a11y.ts b/web/packages/common/scripts/update-max-warnings-a11y.ts
index c57a47612b..39bdfcc240 100644
--- a/web/packages/common/scripts/update-max-warnings-a11y.ts
+++ b/web/packages/common/scripts/update-max-warnings-a11y.ts
@@ -26,8 +26,7 @@ async function main() {
   }
   const currentMax: number = parseInt(maxWarningsMatch[1], 10);
 
-  // Lint via the ESLint Node API using the a11y flat config only, with inline
-  // directives ignored (mirrors `--config ... --no-config-lookup --no-inline-config`).
+  // a11y flat config only; inline directives ignored
   const eslint = new ESLint({
     overrideConfigFile: path.resolve(process.cwd(), '../../eslint.config.a11y.js'),
     allowInlineConfig: false,

From e9161756d06e4a2a4efff4720d08b6907f1a9042 Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Thu, 25 Jun 2026 15:12:58 -0700
Subject: [PATCH 15/16] chore(studio): remove unused FilesTable component

FilesTable/index.tsx had no importers (the directory's siblings -
FileQuickActions, DirectoryQuickActions, the file modals, utils - are
imported directly by FilesetFileExplorer/FileActions and stay).

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 .../src/components/FilesTable/index.tsx       | 132 ------------------
 1 file changed, 132 deletions(-)
 delete mode 100644 web/packages/studio/src/components/FilesTable/index.tsx

diff --git a/web/packages/studio/src/components/FilesTable/index.tsx b/web/packages/studio/src/components/FilesTable/index.tsx
deleted file mode 100644
index 469226698b..0000000000
--- a/web/packages/studio/src/components/FilesTable/index.tsx
+++ /dev/null
@@ -1,132 +0,0 @@
-// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
-// SPDX-License-Identifier: Apache-2.0
-
-import { ScrollTable } from '@nemo/common/src/components/ScrollTable';
-import { TableEmptyState } from '@nemo/common/src/components/TableEmptyState';
-import { useQueryParams } from '@nemo/common/src/hooks/useQueryParams';
-import { FilesetFileOutput } from '@nemo/sdk/generated/platform/schema';
-import { Flex, Stack, TableRowDefinition } from '@nvidia/foundations-react-core';
-import { DirectoryQuickActions } from '@studio/components/FilesTable/DirectoryQuickActions';
-import { FileQuickActions } from '@studio/components/FilesTable/FileQuickActions';
-import { FileSystemNode } from '@studio/components/FilesTable/utils';
-import { useDatasetNavigator } from '@studio/hooks/useDatasetNavigator';
-import { useWorkspaceFromPath } from '@studio/hooks/useWorkspaceFromPath';
-import { QUERY_PARAMETERS } from '@studio/routes/constants';
-import { getFilesetFileRoute } from '@studio/routes/utils';
-import { getHumanReadableFileSize } from '@studio/util/files';
-import { File, FolderClosed } from 'lucide-react';
-import { FC, useCallback, useMemo } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-interface Props {
-  filesList: FilesetFileOutput[];
-  datasetFullName: string;
-  isLoading?: boolean;
-}
-
-export const FilesTable: FC<Props> = ({ filesList, datasetFullName, isLoading }) => {
-  const { getQueryParam, setQueryParam } = useQueryParams();
-  const navigate = useNavigate();
-  const workspace = useWorkspaceFromPath();
-
-  const currentFolder = getQueryParam(QUERY_PARAMETERS.filesetFolder);
-  const folderContents = useDatasetNavigator(filesList, currentFolder ?? '');
-
-  const handleDirectoryClick = useCallback(
-    (path: string) => {
-      setQueryParam(QUERY_PARAMETERS.filesetFolder, path);
-    },
-    [setQueryParam]
-  );
-
-  const onRowClick = useCallback(
-    (row: FileSystemNode) => {
-      if (row.type === 'directory') {
-        // Navigate into the directory
-        handleDirectoryClick(row.path);
-      } else if (row.type === 'file') {
-        // for json, jsonl file, just open the viewer
-        const extension = row.path.split('.').pop();
-        if (extension && ['json', 'jsonl'].includes(extension)) {
-          const { path } = row;
-          const to = getFilesetFileRoute(workspace, datasetFullName, path);
-          navigate(to);
-        }
-      }
-    },
-    [datasetFullName, handleDirectoryClick, navigate, workspace]
-  );
-
-  const rows = useMemo<TableRowDefinition[]>(
-    () =>
-      folderContents?.map((file) => ({
-        id: `${file.type}=${file.path}`,
-        cells: [
-          {
-            children: (
-              <Flex gap="density-sm" align="center">
-                {file.type === 'directory' ? <FolderClosed /> : <File />}
-                <div>{file.path.split('/').pop()}</div>
-              </Flex>
-            ),
-          },
-          {
-            children: file.type === 'file' ? getHumanReadableFileSize(file.size) : null,
-          },
-          {
-            children:
-              file.type === 'file' || file.type === 'directory' ? (
-                file.type === 'file' ? (
-                  <FileQuickActions file={file} datasetId={datasetFullName} />
-                ) : (
-                  <DirectoryQuickActions directory={file} datasetId={datasetFullName} />
-                )
-              ) : undefined,
-            attributes: {
-              TableDataCell: {
-                style: { textOverflow: 'clip' },
-                align: 'center',
-              },
-            },
-          },
-        ],
-        onRowSelect: () => onRowClick(file),
-        attributes: {
-          TableRow: { className: 'cursor-pointer hover:bg-accent-gray-subtle' },
-        },
-      })) || [],
-    [datasetFullName, folderContents, onRowClick]
-  );
-
-  return (
-    <Stack gap="density-lg" className="flex-1 h-full overflow-y-auto" justify="center">
-      <ScrollTable
-        columns={[
-          {
-            children: 'Name',
-          },
-          {
-            children: 'Size',
-          },
-          {
-            children: 'Actions',
-            attributes: {
-              TableHeaderCell: {
-                style: { width: 80, textAlign: 'center', textOverflow: 'clip' },
-              },
-            },
-          },
-        ]}
-        rows={rows}
-        pagination={false}
-        loading={isLoading}
-        slotEmptyState={
-          <TableEmptyState
-            header="No files"
-            emptyMessage="Upload a file to this dataset to view it here."
-          />
-        }
-      />
-    </Stack>
-  );
-};

From 7f1cab86f1b32c18fce76a8e6cbacacae17909c8 Mon Sep 17 00:00:00 2001
From: mschwab <mschwab@nvidia.com>
Date: Thu, 25 Jun 2026 15:26:31 -0700
Subject: [PATCH 16/16] fix(a11y): guard missing scripts object in
 update-max-warnings script

Make pkg.scripts optional and guard before indexing lint:a11y, so a
package.json without a scripts object hits the explicit error path instead of
throwing a TypeError.

Signed-off-by: mschwab <mschwab@nvidia.com>
---
 .../common/scripts/update-max-warnings-a11y.ts       | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/web/packages/common/scripts/update-max-warnings-a11y.ts b/web/packages/common/scripts/update-max-warnings-a11y.ts
index 39bdfcc240..ff780f678a 100644
--- a/web/packages/common/scripts/update-max-warnings-a11y.ts
+++ b/web/packages/common/scripts/update-max-warnings-a11y.ts
@@ -9,11 +9,12 @@ import path from 'path';
 async function main() {
   const pkgPath = path.resolve(process.cwd(), 'package.json');
   const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8')) as {
-    scripts: Record<string, string>;
+    scripts?: Record<string, string>;
   };
 
-  const a11yScript: string = pkg.scripts['lint:a11y'];
-  if (!a11yScript) {
+  const scripts = pkg.scripts;
+  const a11yScript = scripts?.['lint:a11y'];
+  if (!scripts || !a11yScript) {
     console.error('No lint:a11y script found in package.json');
     process.exit(1);
   }
@@ -35,10 +36,7 @@ async function main() {
   const warningCount: number = results.reduce((sum, result) => sum + result.warningCount, 0);
 
   if (warningCount !== currentMax) {
-    pkg.scripts['lint:a11y'] = a11yScript.replace(
-      maxWarningsRegex,
-      `--max-warnings ${warningCount}`
-    );
+    scripts['lint:a11y'] = a11yScript.replace(maxWarningsRegex, `--max-warnings ${warningCount}`);
     fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2) + '\n');
     // eslint-disable-next-line no-console
     console.log(`Updated lint:a11y max-warnings from ${currentMax} to ${warningCount}`);