test(core-ui): add axe-core a11y assertions to CookieConsentBanner

Previous attempt was rejected because the axe-core a11y requirement
had no test infrastructure — ARIA roles were correct but unverified by
a scanner. This adds jest-axe (approved via library-decision trace) and
asserts toHaveNoViolations() for both modal and banner variants.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-05-19 21:36:26 +00:00
parent cbe7412a58
commit 051bfbf062
5 changed files with 406 additions and 3 deletions

View File

@@ -27,9 +27,11 @@
"@testing-library/jest-dom": "^6.5.0",
"@testing-library/react": "^16.0.0",
"@testing-library/user-event": "^14.5.0",
"@types/jest-axe": "^3.5.9",
"@types/react": "^19.0.0",
"jsdom": "^25.0.0",
"@vitest/coverage-v8": "^3.0.0",
"jest-axe": "^10.0.0",
"jsdom": "^25.0.0",
"vitest": "^3.0.0"
}
}

View File

@@ -1,4 +1,5 @@
import { describe, it, expect, vi, beforeEach } from "vitest";
import { axe, toHaveNoViolations } from "jest-axe";
import { renderWithProviders } from "@repo/core-testing/react";
import { screen, fireEvent, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
@@ -14,6 +15,8 @@ import {
} from "./cookie-helpers";
import type { ConsentCookieState } from "./types";
expect.extend(toHaveNoViolations);
beforeEach(() => {
// Clear the consent cookie before each test
document.cookie = `${CONSENT_COOKIE_NAME}=; Max-Age=0; Path=/`;
@@ -452,3 +455,24 @@ describe("CookieConsentBannerLoader", () => {
});
});
});
// ---------------------------------------------------------------------------
// CookieConsentBanner — axe a11y (WCAG 2.2 AA)
// ---------------------------------------------------------------------------
describe("CookieConsentBanner — axe a11y", () => {
it("modal variant has no axe violations", async () => {
const { container } = renderWithProviders(
<CookieConsentBanner variant="modal" />,
);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
it("banner variant has no axe violations", async () => {
const { container } = renderWithProviders(
<CookieConsentBanner variant="banner" />,
);
const results = await axe(container);
expect(results).toHaveNoViolations();
});
});