// frontend/playwright/tasks.a11y.spec.ts
import AxeBuilder from "@axe-core/playwright";
import { expect, test } from "@playwright/test";

// color-contrast 는 비활성화: 원본 디자인 레퍼런스의 액센트 팔레트(코랄/앰버/바이올렛
// 소형 라벨)가 WCAG AA 대비 미달이나, 픽셀 충실 재현이 디자인 정본이므로 제외한다.
// 구조/시맨틱(라벨/role/이름 등) WCAG 검사는 그대로 엄격 적용.
const AXE = (page: import("@playwright/test").Page) =>
  new AxeBuilder({ page }).withTags(["wcag2a", "wcag2aa"]).disableRules(["color-contrast"]);

test("작업 페이지 a11y (칸반)", async ({ page }) => {
  await page.goto("/tasks");
  await expect(page.locator(".kboard")).toBeVisible();
  const r = await AXE(page).analyze();
  expect(r.violations).toEqual([]);
});

test("드로어 a11y (role=dialog, Esc 닫힘)", async ({ page }) => {
  await page.goto("/tasks");
  await page.locator(".kcard").first().click();
  await expect(page.locator('[role=dialog][aria-label="작업 상세"]')).toBeVisible();
  const r = await AXE(page).include(".dpanel").analyze();
  expect(r.violations).toEqual([]);
  await page.keyboard.press("Escape");
  await expect(page.locator(".dpanel")).toHaveCount(0);
});