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:
@@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user