NVIDIA-NeMo · marcusds · Jun 24, 2026 · Jun 24, 2026 · Jun 25, 2026 · Jun 25, 2026
@@ -21,8 +21,11 @@ export default [
       'jsx-a11y': jsxA11yPlugin,
     },
     rules: {
+      // All non-deprecated jsx-a11y rules as warnings.
       ...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'])
       ),
     },
   },

@@ -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 4",
+    "update-warning-count:a11y": "tsx scripts/update-max-warnings-a11y.ts",
     "test": "vitest --run",
     "test:ci": "vitest run --coverage",
     "test:watch": "vitest watch",

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+// SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { ESLint } from 'eslint';
+import fs from 'fs';
+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>;
+  };
+
+  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);
+  }
+
+  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);
+
+  // a11y flat config only; inline directives ignored
+  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);
+
+  if (warningCount !== currentMax) {
+    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);
+});
@@ -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>
   ),
 }));
 

@@ -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>,
@@ -157,7 +158,15 @@ vi.mock('@nemo/common/src/components/DataView/internal', () => ({
     className?: string;
     onClick?: React.MouseEventHandler;
   }) => (
-    <table className={className} onClick={onClick}>
+    // ref (not JSX onClick) so jsx-a11y doesn't flag the test-only <table>
+    <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}>
@@ -168,7 +177,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}`} />
@@ -289,7 +298,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 +346,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 +478,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);

@@ -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}
     />
   );
 }

@@ -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>
   );
 };
@@ -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,10 +83,6 @@ describe('StatusBadge component', () => {
       expect(badge).toBeInTheDocument();
       expect(badge).toHaveTextContent(expectedBadge.label);
 
-      // Check if icon is rendered when icon exists
-      const icon = customScreen.getByRole('img');
-      expect(icon).toBeInTheDocument();
-
       unmount();
     });
   });
@@ -157,14 +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} />);
-      expect(screen.getByRole('img')).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} />);
-      expect(screen.queryByRole('img')).not.toBeInTheDocument();
+      expect(screen.getByTestId('nv-badge')).toHaveTextContent('Error');
     });
 
     it('falls back to provided fallback for unknown status', () => {

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

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

@@ -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,
@@ -181,23 +182,35 @@ 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={() => {
+              fileInputRef.current?.click();
+            }}
+          >
+            Upload More Files
           </Button>
           {trailingButton}
         </Flex>
       ) : (
-        <Button kind="tertiary" asChild>
-          <label htmlFor="upload-more-files">Upload More Files</label>
+        <Button
+          kind="tertiary"
+          onClick={() => {
+            fileInputRef.current?.click();
+          }}
+        >
+          Upload More Files
         </Button>
       )}
       <input
-        id="upload-more-files"
+        ref={fileInputRef}
         type="file"
         multiple
+        tabIndex={-1}
         onChange={handleFileChange}
         accept={acceptableFileTypes.join(',')}
         className="sr-only"
+        aria-label="Upload more files"
       />
     </Stack>
   );

@@ -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 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}'",
     "preview": "vite preview",

@@ -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';
 
@@ -63,14 +63,12 @@ export const FileTag: FC<FileTagProps> = ({
           <Flex gap="density-sm">{fileName}</Flex>
           {onClick && <X />}
         </Tag>
-      ) : (
-        <div
-          role="button"
-          onClick={onNoFileClick}
-          className={onNoFileClick ? 'cursor-pointer' : undefined}
-        >
+      ) : onNoFileClick ? (
+        <Button kind="tertiary" onClick={onNoFileClick} className="h-auto p-0">
           {missingFileNameChip}
-        </div>
+        </Button>
+      ) : (
+        <div>{missingFileNameChip}</div>
       )}
     </Flex>
   );