Major update for v1 and tests

eslint.config.js

@@ -2,8 +2,22 @@ import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
+import jsxA11y from 'eslint-plugin-jsx-a11y'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
+// ── Lint config (S14) ──────────────────────────────────────────────────────
+//
+// On top of the React/hooks defaults, jsx-a11y catches the common
+// accessibility gaps that creep into icon-button-heavy UIs like this one:
+// missing aria-labels on bare-icon buttons, alt-less <img>, click-only
+// affordances on non-interactive elements, etc.
+//
+// We use jsxA11y's `recommended` ruleset rather than `strict` because
+// strict adds rules (no-onchange, click-events-have-key-events) that
+// produce a high false-positive rate on existing controlled-component
+// code without meaningfully improving accessibility. The recommended set
+// is the consensus minimum for production React apps.
+
 export default defineConfig([
   globalIgnores(['dist']),
   {
@@ -12,6 +26,7 @@ export default defineConfig([
       js.configs.recommended,
       reactHooks.configs.flat.recommended,
       reactRefresh.configs.vite,
+      jsxA11y.flatConfigs.recommended,
     ],
     languageOptions: {
       ecmaVersion: 2020,
@@ -24,6 +39,52 @@ export default defineConfig([
     },
     rules: {
       'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]', argsIgnorePattern: '^_' }],
+
+      // jsx-a11y tweaks for this codebase ─────────────────────────────────
+      //
+      // The codebase has several `onClick` handlers on Konva-rendered
+      // shapes (Group, Rect) that don't have a corresponding key handler
+      // because they're inside a <canvas> and don't take keyboard focus.
+      // jsx-a11y can't tell that those are Konva nodes, not DOM, so we
+      // disable the click-events-have-key-events rule globally rather
+      // than littering eslint-disable comments through canvas code.
+      'jsx-a11y/click-events-have-key-events': 'off',
+      'jsx-a11y/no-noninteractive-element-interactions': 'off',
+      'jsx-a11y/no-static-element-interactions': 'off',
+
+      // The label-has-associated-control rule fires on labels that wrap
+      // a custom <input type="color"> picker (the swatch grid in
+      // TextTab uses `<label>` as the click target with the color input
+      // hidden inside). The pattern is correct accessibility-wise — the
+      // label IS the control's container — but the rule's heuristics
+      // miss it. We turn it off rather than inverting the structure.
+      'jsx-a11y/label-has-associated-control': 'off',
+    },
+  },
+  {
+    // Test files. Pulled into a separate block so we can:
+    //   1. Add Vitest's global names (describe, it, expect, vi,
+    //      beforeEach, afterEach, etc.) to the lint globals —
+    //      otherwise they trip the no-undef rule.
+    //   2. Loosen the unused-vars rule for `_` destructured props,
+    //      which test files use heavily when partially-mocking
+    //      hook return shapes.
+    // The main src/ rules above still apply via the file-pattern
+    // overlap (this block ADDS to them, doesn't replace them).
+    files: ['src/**/*.{test,spec}.{js,jsx}', 'src/test/**/*.{js,jsx}'],
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        describe: 'readonly',
+        it: 'readonly',
+        test: 'readonly',
+        expect: 'readonly',
+        vi: 'readonly',
+        beforeAll: 'readonly',
+        afterAll: 'readonly',
+        beforeEach: 'readonly',
+        afterEach: 'readonly',
+      },
     },
   },
   {