@hs-web-team/eslint-config-node 3.2.0-next.7 → 3.3.0

package/.github/workflows/main.yml

@@ -11,11 +11,11 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [22, 24]
+        node: [24]
 
     name: Node ${{ matrix.node }} lint
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v6
       - name: Run unit tests
         uses: actions/setup-node@v6
         with:

package/.github/workflows/pr.yml

@@ -11,11 +11,11 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [22, 24]
+        node: [24]
 
     name: Node ${{ matrix.node }} sample
     steps:
-      - uses: actions/checkout@v5
+      - uses: actions/checkout@v6
       - name: Run unit tests
         uses: actions/setup-node@v6
         with:

package/.nvmrc

@@ -1 +1 @@
-v22
+v24

package/CLAUDE.md

@@ -106,7 +106,7 @@ When testing changes to this package in downstream projects, you'll typically:
 
 ### Package Details
 - **Type**: ESM module (`"type": "module"`)
-- **Node requirement**: >= 22
+- **Node requirement**: >= 24
 - **Exports**:
   - Main export (`.`): `index.js` - Node.js ESLint configuration
   - Browser export (`./browser`): `browser.js` - Browser/React ESLint configuration
@@ -118,7 +118,7 @@ When testing changes to this package in downstream projects, you'll typically:
 ### Migration Context
 This package is currently on v3, which uses ESLint 9's flat config format. The project has migrated from:
 - v1 → v2: See `docs/MIGRATION-V2.md`
-- v2 → v3: See `docs/MIGRATION-V3.md` (ESLint 9 flat config migration requiring Node.js 22+)
+- v2 → v3: See `docs/MIGRATION-V3.md` (ESLint 9 flat config migration requiring Node.js 24+)
 
 ## Important Notes
 
@@ -137,7 +137,7 @@ This package is currently on v3, which uses ESLint 9's flat config format. The p
 - Mixed module systems:
   - Main package is ESM (`index.js`, `browser.js`)
   - Utility scripts use CommonJS (`bin/add-prettier-scripts.js`, `cypress.config.cjs`)
-- CI runs on Node 22 and 24 (see `.github/workflows/pr.yml`)
+- CI runs on Node 24 (see `.github/workflows/pr.yml`)
 - No automated tests currently (`npm test` will fail with "Error: no test specified")
 - Detailed documentation available in `examples/`:
   - `browser-usage.md` - Browser/React ESLint configuration

package/README.md

@@ -10,6 +10,7 @@ This package provides ESLint rules and configurations for **Hubspot Marketing We
 - [Browser/React Setup](#browserreact-setup)
 - [Stylelint Setup](#stylelint-setup)
 - [Cypress Setup](#cypress-setup)
+- [Accessibility Testing](#accessibility-testing-optional)
 - [Where to use it](#where-to-use-it)
 - [Using the Prettier Scripts](#using-the-prettier-scripts)
 <!-- index-end -->
@@ -123,6 +124,39 @@ This package provides shared Cypress configuration for E2E testing.
 
 For detailed Cypress configuration and migration documentation, see [examples/cypress-usage.md](./examples/cypress-usage.md).
 
+## Accessibility Testing (optional)
+
+This package includes a shared accessibility testing setup using [cypress-axe](https://github.com/component-driven/cypress-axe). Projects can opt in with a single import — no need to install `cypress-axe` or `axe-core` directly.
+
+1. Add to `cypress/support/e2e.ts`
+
+    ```ts
+    import '@hs-web-team/eslint-config-node/cypress';
+    ```
+
+    This registers `cy.injectAxe()`, `cy.checkA11y()`, and `cy.checkAccessibility()`.
+
+2. Call `cy.injectAxe()` in your project's navigation command, after the page visit e.g.
+
+    ```ts
+    // cypress/support/commands.ts
+    cy.visitPageIfUrlChanged(urlPath).then(() => {
+      cy.injectAxe();
+    });
+    ```
+
+3. Use `cy.checkAccessibility()` in your tests e.g.
+
+    ```ts
+    // Check the whole page
+    cy.checkAccessibility();
+
+    // Scope to a specific component
+    cy.checkAccessibility('.csol-accordion');
+    ```
+
+`cy.checkAccessibility()` adds the `high-contrast` class to `body`, runs WCAG 2.2 Level AA rules only, and logs each violation with its id, help text, impact, element targets, and help URL. TypeScript types are included — no `tsconfig.json` changes required.
+
 ## Where to use it
 
 This package provides multiple configurations:
@@ -131,6 +165,7 @@ This package provides multiple configurations:
 - **Browser configuration** (`/browser` export): For browser-based projects including React applications
 - **Stylelint configuration** (`.stylelintrc.json` export): For SCSS/CSS linting
 - **Cypress configuration** (`cypress.config` export): For E2E testing with Cypress
+- **Accessibility testing** (`/cypress` export): Opt-in cypress-axe setup with WCAG 2.2 AA checks
 - **Prettier configuration** (`.prettierrc.json` export): For code formatting
 
 Choose the appropriate configurations based on your project needs.

package/cypress/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="cypress" />
+
+declare namespace Cypress {
+  interface Chainable {
+    checkAccessibility(context?: string | Node | JQueryWithSelector): Chainable<void>;
+  }
+}

package/cypress/index.js

@@ -0,0 +1,34 @@
+import 'cypress-axe';
+
+const WCAG_RULE_SETS = ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22a', 'wcag22aa'];
+
+function logViolations(violations) {
+  violations.forEach(({ id, help, impact, nodes, helpUrl }) => {
+    const targets = nodes.map(({ target }) => target.join(', ')).join('\n    ');
+    console.error(`[a11y][${impact}] ${id}: ${help}\n    targets: ${targets}\n    ${helpUrl}`);
+    Cypress.log({
+      name: 'a11y violation',
+      message: `[${impact}] ${id}: ${help}`,
+      consoleProps: () => ({ id, help, impact, targets, helpUrl }),
+    });
+  });
+}
+
+Cypress.Commands.add('checkAccessibility', (context) => {
+  cy.get('body').then(($body) => {
+    if (!$body.hasClass('high-contrast')) {
+      $body.addClass('high-contrast');
+    }
+  });
+
+  cy.checkA11y(
+    context,
+    {
+      runOnly: {
+        type: 'tag',
+        values: WCAG_RULE_SETS,
+      },
+    },
+    logViolations,
+  );
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hs-web-team/eslint-config-node",
-  "version": "3.2.0-next.7",
+  "version": "3.3.0",
   "description": "HubSpot Marketing WebTeam shared configurations for ESLint, Prettier, Stylelint, and Cypress",
   "main": "index.js",
   "type": "module",
@@ -12,12 +12,19 @@
     "./cypress.config": {
       "types": "./cypress.config.d.ts",
       "require": "./cypress.config.cjs"
+    },
+    "./cypress": {
+      "types": "./cypress/index.d.ts",
+      "default": "./cypress/index.js"
     }
   },
   "typesVersions": {
     "*": {
       "cypress.config": [
         "./cypress.config.d.ts"
+      ],
+      "cypress": [
+        "./cypress/index.d.ts"
       ]
     }
   },
@@ -26,7 +33,7 @@
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "engines": {
-    "node": ">=22"
+    "node": ">=24"
   },
   "bin": {
     "add-prettier": "bin/add-prettier-scripts.js"
@@ -55,6 +62,9 @@
     "@eslint/js": "^9.39.1",
     "@typescript-eslint/eslint-plugin": "^8.46.3",
     "@typescript-eslint/parser": "^8.46.3",
+    "axe-core": "^4.11.3",
+    "cypress-axe": "^1.7.0",
+    "esbuild": "^0.27.2",
     "eslint": "^9.39.2",
     "eslint-formatter-checkstyle": "^9.0.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -62,10 +72,9 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "globals": "^17.3.0",
     "jiti": "^2.6.1",
+    "js-yaml": "^4.1.1",
     "prettier": "^3.8.1",
-    "typescript-eslint": "^8.54.0",
-    "esbuild": "^0.27.2",
-    "js-yaml": "^4.1.1"
+    "typescript-eslint": "^8.54.0"
   },
   "peerDependencies": {
     "@badeball/cypress-cucumber-preprocessor": "^24.0.0",