feat(a11y): add jest-axe and jsx-a11y with baseline for SettlementTable and MetricsBar

eslint.config.mjs

@@ -5,6 +5,22 @@ import nextTs from "eslint-config-next/typescript";
 const eslintConfig = defineConfig([
   ...nextVitals,
   ...nextTs,
+  // Ensure a11y rules are explicitly turned on as requested
+  {
+    rules: {
+      "jsx-a11y/alt-text": "error",
+      "jsx-a11y/aria-props": "error",
+      "jsx-a11y/aria-proptypes": "error",
+      "jsx-a11y/aria-unsupported-elements": "error",
+      "jsx-a11y/role-has-required-aria-props": "error",
+      "jsx-a11y/role-supports-aria-props": "error",
+      "jsx-a11y/no-interactive-element-to-noninteractive-role": "error",
+      "jsx-a11y/no-noninteractive-element-to-interactive-role": "error",
+      "jsx-a11y/no-noninteractive-tabindex": "error",
+      "jsx-a11y/anchor-is-valid": "error",
+      "jsx-a11y/anchor-has-content": "error"
+    }
+  },
   // Override default ignores of eslint-config-next.
   globalIgnores([
     // Default ignores of eslint-config-next:

package.json

@@ -29,6 +29,7 @@
     "cross-env": "^10.1.0",
     "eslint": "^9",
     "eslint-config-next": "16.1.6",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
     "jsdom": "^29.1.1",
     "tailwindcss": "^4",
     "typescript": "^5",

src/components/SettlementTable.tsx

@@ -62,31 +62,35 @@ export function SettlementTable({
       <table className="hidden sm:table w-full text-left text-sm">
         <thead>
           <tr className="border-b border-zinc-800 text-zinc-400">
-            <th className="py-2 font-medium">#</th>
+            <th scope="col" className="py-2 font-medium">#</th>
             <SortableHeader
               label="Anchor"
               sortKey="anchor"
               sort={sort}
               onSort={requestSort}
               onClearSort={clearSort}
             />
-            <th className="py-2 font-medium">Asset</th>
+            <th scope="col" className="py-2 font-medium">Asset</th>
             <SortableHeader
               label="Amount"
               sortKey="amount"
               sort={sort}
               onSort={requestSort}
               onClearSort={clearSort}
             />
-            <th className="py-2 font-medium">Fee</th>
+            <th scope="col" className="py-2 font-medium">Fee</th>
             <SortableHeader
               label="Status"
               sortKey="status"
               sort={sort}
               onSort={requestSort}
               onClearSort={clearSort}
             />
-            {actionable ? <th className="py-2" /> : null}
+            {actionable ? (
+              <th scope="col" className="py-2">
+                <span className="sr-only">Actions</span>
+              </th>
+            ) : null}
           </tr>
         </thead>
         <tbody>

src/components/ToastProvider.tsx

@@ -152,6 +152,7 @@ function ToastItem({
     <div
       role="status"
       aria-live="polite"
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- Required for keyboard users to pause the auto-dismiss timer without focusing the dismiss button
       tabIndex={0}
       onMouseEnter={pauseTimer}
       onMouseLeave={startTimer}

src/components/a11y.test.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { expect, test, describe, vi } from "vitest";
+import { axe } from "jest-axe";
+import { SettlementTable } from "./SettlementTable";
+import { MetricsBar } from "./MetricsBar";
+
+global.fetch = vi.fn(() =>
+  Promise.resolve({
+    ok: true,
+    json: () =>
+      Promise.resolve({
+        activeAnchors: 10,
+        anchors: 20,
+        pools: 5,
+        totalLiquidity: 1000,
+        settlements: 50,
+        pendingSettlements: 5,
+      }),
+  })
+) as any;
+
+describe("Accessibility checks", () => {
+  test("SettlementTable should have no a11y violations", async () => {
+    const mockSettlements: any[] = [
+      { id: 1, anchor: "Anchor1", asset: "USDC", amount: 100, fee: 1, status: "pending" },
+    ];
+
+    const { container } = render(
+      <SettlementTable settlements={mockSettlements} onExecute={vi.fn()} onCancel={vi.fn()} />
+    );
+
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+
+  test("SettlementTable actionable buttons should be keyboard operable", async () => {
+    const mockSettlements: any[] = [
+      { id: 1, anchor: "Anchor1", asset: "USDC", amount: 100, fee: 1, status: "pending" },
+    ];
+
+    const onExecute = vi.fn();
+    render(<SettlementTable settlements={mockSettlements} onExecute={onExecute} />);
+
+    const user = userEvent.setup();
+    const executeButton = screen.getAllByRole("button", { name: /execute/i })[0];
+    executeButton.focus();
+    expect(executeButton).toHaveFocus();
+
+    await user.keyboard("{Enter}");
+    expect(onExecute).toHaveBeenCalledWith(1);
+  });
+
+  test("MetricsBar should have no a11y violations", async () => {
+    const { container } = render(<MetricsBar />);
+    await screen.findByText(/10\/20/);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+});

vitest.setup.ts

@@ -1,6 +1,9 @@
 import "@testing-library/jest-dom/vitest";
-import { afterEach, vi } from "vitest";
+import { afterEach, vi, expect } from "vitest";
 import { cleanup } from "@testing-library/react";
+import { toHaveNoViolations } from "jest-axe";
+
+expect.extend(toHaveNoViolations);
 
 // Suppress the NEXT_PUBLIC_API_URL missing warning that fires as a module
 // side-effect when api.ts is imported in tests.