test: add accessibility tests with jest-axe

package.json

@@ -29,16 +29,20 @@
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/bun": "^1.3.14",
+    "@types/jest-axe": "^3.5.9",
     "@types/node": "^25",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6.0.2",
     "eslint": "^9",
     "eslint-config-next": "^15.1.8",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "jsdom": "^29.1.1",
+    "jest-axe": "^10.0.0",
     "postcss": "^8",
     "tailwindcss": "^3.4.17",
     "typescript": "^5",
+    "vite-tsconfig-paths": "^6.1.1",
     "vitest": "^4.1.6"
   }
 }

src/components/ExportSettings.a11y.spec.tsx

@@ -0,0 +1,28 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { describe, test, expect, vi } from "vitest";
+
+import ExportSettings from "./ExportSettings";
+
+describe("ExportSettings accessibility", () => {
+  test("has no accessibility violations", async () => {
+    const recipe = {
+      quality: 23,
+      format: "mp4",
+      soundOnCompletion: false,
+      stabilization: false,
+    };
+
+    const { container } = render(
+      <ExportSettings
+        recipe={recipe as any}
+        duration={60}
+        onChange={vi.fn()}
+      />
+    );
+
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+});

src/components/FileUpload.a11y.spec.tsx

@@ -0,0 +1,26 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { describe, test, expect, vi } from "vitest";
+
+vi.mock("./LottiePlayer", () => ({
+  default: () => <div data-testid="lottie-player" />,
+}));
+
+import FileUpload from "./FileUpload";
+
+describe("FileUpload accessibility", () => {
+  test("has no accessibility violations", async () => {
+    const { container } = render(
+      <FileUpload
+        onFileSelect={vi.fn()}
+        currentFile={null}
+        fileError=""
+        duration={0}
+      />
+    );
+
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+});

src/components/FileUpload.tsx

@@ -29,6 +29,7 @@ export default function FileUpload({
   const dragCounterRef = useRef(0);
 
   // ── Keyboard shortcut Ctrl+O ──────────────────────────
+
   useEffect(() => {
     const handler = (e: KeyboardEvent) => {
       if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "o") {
@@ -175,22 +176,11 @@ export default function FileUpload({
       {fileError && (
         <p className="text-xs text-[var(--error)] mt-2 font-medium">{fileError}</p>
       )}
-
-      <input
-        ref={inputRef}
-        type="file"
-        accept="video/*"
-        className="hidden"
-        onChange={(e) => {
-          const f = e.target.files?.[0];
-          if (f) handleFile(f);
-        }}
-      />
     </div>
   );
 
-  // ── Drop zone (inner) ─────────────────────────────────
   const DropZone = () => (
+  <>
     <div
       id="upload-zone"
       role="button"
@@ -205,6 +195,7 @@ export default function FileUpload({
       onClick={() => inputRef.current?.click()}
       onKeyDown={(e) => {
         if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
           inputRef.current?.click();
         }
       }}
@@ -246,19 +237,26 @@ export default function FileUpload({
       {fileError && (
         <p className="text-sm text-[var(--error)] text-center">{fileError}</p>
       )}
+      {currentFile && (
+        <p className="text-xs text-[var(--muted)] mt-2">
+          Selected: {formatBytes(currentFile.size)}
+        </p>
+      )}
+      </div>
 
       <input
         ref={inputRef}
         type="file"
         accept="video/*"
+        aria-label="Upload video file"
         className="hidden"
         onChange={(e) => {
           const f = e.target.files?.[0];
           if (f) handleFile(f);
         }}
       />
-    </div>
-  );
+      </>
+      );
 
   return (
     <>

src/components/FormatSelector.a11y.spec.tsx

@@ -0,0 +1,24 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { describe, test, expect, vi } from "vitest";
+
+import FormatSelector from "./FormatSelector";
+
+describe("FormatSelector accessibility", () => {
+  test("has no accessibility violations", async () => {
+    const recipe = {
+      format: "mp4",
+    };
+
+    const { container } = render(
+      <FormatSelector
+        recipe={recipe as any}
+        onChange={vi.fn()}
+      />
+    );
+
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+});

src/components/PresetSelector.a11y.spec.tsx

@@ -0,0 +1,26 @@
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+import { describe, test, expect, vi } from "vitest";
+
+import PresetSelector from "./PresetSelector";
+
+describe("PresetSelector accessibility", () => {
+  test("has no accessibility violations", async () => {
+    const recipe = {
+      preset: "vertical-9-16",
+      customWidth: 1080,
+      customHeight: 1920,
+    };
+
+    const { container } = render(
+      <PresetSelector
+        recipe={recipe as any}
+        onChange={vi.fn()}
+      />
+    );
+
+    const results = await axe(container);
+
+    expect(results).toHaveNoViolations();
+  });
+});

vitest.config.ts

@@ -1,14 +1,20 @@
-import { defineConfig } from 'vitest/config'
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   oxc: {
     jsx: {
-      runtime: 'automatic',
+      runtime: "automatic",
     },
   },
+  plugins: [
+    react(),
+    tsconfigPaths(),
+  ],
   test: {
-    environment: 'jsdom',
+    environment: "jsdom",
     globals: true,
-    setupFiles: './vitest.setup.ts',
+    setupFiles: "./vitest.setup.ts",
   },
-})
+});

vitest.setup.ts

@@ -1,7 +1,10 @@
-// Vitest setup: polyfills and global mocks
-import '@testing-library/jest-dom/vitest'
+import "@testing-library/jest-dom/vitest";
+import { expect } from "vitest";
+import { toHaveNoViolations } from "jest-axe";
 
-Object.defineProperty(window, 'matchMedia', {
+expect.extend(toHaveNoViolations);
+
+Object.defineProperty(window, "matchMedia", {
   writable: true,
   value: (query: string) => ({
     matches: false,
@@ -13,4 +16,4 @@ Object.defineProperty(window, 'matchMedia', {
     removeEventListener: () => {},
     dispatchEvent: () => false,
   }),
-})
+});