chore(deps): update dependency eslint to v9

eslint.config.ts

@@ -0,0 +1,159 @@
+import { FlatCompat } from "@eslint/eslintrc"
+import path from "path"
+import { fileURLToPath } from "url"
+import styledComponentsA11y from "eslint-plugin-styled-components-a11y"
+import importPlugin from "eslint-plugin-import"
+import * as mdxPlugin from "eslint-plugin-mdx"
+import testingLibraryPlugin from "eslint-plugin-testing-library"
+import typescriptEslint from "@typescript-eslint/eslint-plugin"
+import jsxA11yPlugin from "eslint-plugin-jsx-a11y"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: {},
+  allConfig: {},
+})
+
+const restrictedImports = ({ paths = [], patterns = [] } = {}) => ({
+  "@typescript-eslint/no-restricted-imports": [
+    "error",
+    {
+      paths: [
+        /**
+         * No direct imports from large "barrel files". They make Jest slow.
+         *
+         * For more, see:
+         *  - https://github.com/jestjs/jest/issues/11234
+         *  - https://github.com/faker-js/faker/issues/1114#issuecomment-1169532948
+         */
+        {
+          name: "@faker-js/faker",
+          message: "Please use @faker-js/faker/locale/en instead.",
+          allowTypeImports: true,
+        },
+        {
+          name: "@mui/material",
+          message: "Please use @mui/material/<COMPONENT_NAME> instead.",
+          allowTypeImports: true,
+        },
+        ...paths,
+      ],
+      patterns: [...patterns],
+    },
+  ],
+})
+
+export default [
+  // Global ignores
+  {
+    ignores: ["**/build/**"],
+  },
+
+  // Convert legacy configs to flat config - apply to all files
+  ...compat.extends("eslint-config-mitodl"),
+  ...compat.extends("eslint-config-prettier"),
+
+  // Base configuration for all files
+  {
+    files: ["**/*.{js,jsx,ts,tsx}"],
+    plugins: {
+      "@typescript-eslint": typescriptEslint,
+      "styled-components-a11y": styledComponentsA11y,
+      import: importPlugin,
+      mdx: mdxPlugin,
+      "testing-library": testingLibraryPlugin,
+      "jsx-a11y": jsxA11yPlugin,
+    },
+    settings: {
+      "jsx-a11y": {
+        components: {
+          "ListCard.Image": "img",
+          "Card.Image": "img",
+          Button: "button",
+          ButtonLink: "a",
+          ActionButton: "button",
+          ActionButtonLink: "a",
+        },
+      },
+    },
+    rules: {
+      ...restrictedImports(),
+      "react/display-name": [2, {}],
+      // This rule is disabled in the default a11y config, but unclear why.
+      // It does catch useful errors, e.g., buttons with no text or label.
+      // If it proves to be flaky, we can find other ways to check for this.
+      // We need both rules below. One for normal elements, one for styled
+      "jsx-a11y/control-has-associated-label": ["error"],
+      "styled-components-a11y/control-has-associated-label": ["error"],
+      "jsx-a11y/anchor-has-content": ["error"],
+      "@typescript-eslint/triple-slash-reference": [
+        "error",
+        {
+          path: "never",
+          types: "prefer-import",
+          lib: "never",
+        },
+      ],
+      "import/no-extraneous-dependencies": [
+        "error",
+        {
+          devDependencies: [
+            "**/*.test.ts",
+            "**/*.test.tsx",
+            "**/src/setupJest.ts",
+            "**/jest-setup.ts",
+            "**/jsdom-extended.ts",
+            "**/test-utils/**",
+            "**/test-utils/**",
+            "**/webpack.config.js",
+            "**/webpack.exports.js",
+            "**/postcss.config.js",
+            "**/*.stories.ts",
+            "**/*.stories.tsx",
+            "**/*.mdx",
+            "vite.config.mts",
+            ".storybook/**",
+          ],
+        },
+      ],
+      "import/no-duplicates": "error",
+      quotes: ["error", "double", { avoidEscape: true }],
+      "no-restricted-syntax": [
+        "error",
+        /**
+         * See https://eslint.org/docs/latest/rules/no-restricted-syntax
+         *
+         * The selectors use "ES Query", a css-like syntax for AST querying. A
+         * useful tool is  https://estools.github.io/esquery/
+         */
+        {
+          selector:
+            "Property[key.name=fontWeight][value.raw=/\\d+/], TemplateElement[value.raw=/font-weight: \\d+/]",
+          message:
+            "Do not specify `fontWeight` manually. Prefer spreading `theme.typography.subtitle1` or similar. If you MUST use a fontWeight, refer to `fontWeights` theme object.",
+        },
+        {
+          selector:
+            "Property[key.name=fontFamily][value.raw=/Neue Haas/], TemplateElement[value.raw=/Neue Haas/]",
+          message:
+            "Do not specify `fontFamily` manually. Prefer spreading `theme.typography.subtitle1` or similar. If using neue-haas-grotesk-text, this is ThemeProvider's default fontFamily.",
+        },
+      ],
+    },
+  },
+
+  // Test files configuration
+  {
+    files: ["./**/*.test.{ts,tsx}"],
+    ...compat.extends("eslint-config-mitodl/jest")[0],
+    plugins: {
+      "testing-library": testingLibraryPlugin,
+    },
+    rules: {
+      "testing-library/no-node-access": "off",
+    },
+  },
+]

package.json

@@ -81,6 +81,7 @@
     "@chromatic-com/storybook": "^3.0.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@eslint/eslintrc": "^3.2.0",
     "@faker-js/faker": "^9.0.0",
     "@jest/environment": "^29.7.0",
     "@mui/lab": "6.0.0-dev.240424162023-9968b4889d",
@@ -110,7 +111,7 @@
     "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.13.0",
     "@typescript-eslint/typescript-estree": "^8.13.0",
-    "eslint": "8.57.1",
+    "eslint": "9.29.0",
     "eslint-config-mitodl": "^2.1.0",
     "eslint-config-prettier": "^10.0.0",
     "eslint-import-resolver-typescript": "^4.0.0",
@@ -155,5 +156,8 @@
     "workerDirectory": [
       "storybook-public"
     ]
+  },
+  "resolutions": {
+    "jiti": "^2.0.0"
   }
 }

src/bundles/AiDrawer/AiDrawerManager.stories.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/rules-of-hooks */
 import * as React from "react"
 import type { Meta, StoryObj } from "@storybook/react"
 import invariant from "tiny-invariant"

src/components/AiChat/AiChat.test.tsx

@@ -1,5 +1,4 @@
 // This was giving false positives
-/* eslint-disable testing-library/await-async-utils */
 import { render, screen, waitFor } from "@testing-library/react"
 import user from "@testing-library/user-event"
 import { AiChat, replaceMathjax } from "./AiChat"

src/components/Checkbox/Checkbox.tsx

@@ -106,28 +106,35 @@ const Checkbox: React.FC<CheckboxProps> = ({
   className,
   disabled = false,
 }) => {
+  const checkboxId = React.useId()
+  const labelId = React.useId()
+
   return (
     <Container className={className}>
       {label ? (
-        <label>
+        <label htmlFor={checkboxId} id={labelId}>
           <input
+            id={checkboxId}
             type="checkbox"
             name={name}
             value={value}
             checked={checked}
             onChange={onChange}
             disabled={disabled}
+            aria-labelledby={labelId}
           />
           <span className="checkbox-label">{label}</span>
         </label>
       ) : (
         <input
+          id={checkboxId}
           type="checkbox"
           name={name}
           value={value}
           checked={checked}
           onChange={onChange}
           disabled={disabled}
+          aria-label={`Checkbox ${name || value || ""}`.trim() || "Checkbox"}
         />
       )}
     </Container>

src/components/Input/Input.stories.tsx

@@ -147,7 +147,6 @@ export const States: Story = {
         <Grid size={{ xs: 8 }}>
           <Input
             // This is a story just demonstrating the autofocus prop
-            // eslint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
             {...args}
           />