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

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",
+  "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"
       ]
     }
   },
@@ -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",