import "@testing-library/jest-dom";
import * as React from "react";
import { describe, it } from "vitest";

import { Button } from "./button";
import BackButtonWithTitle from "./buttons/BackButtonWithTitle";
import { expectNoAxeViolations } from "@toolctrl/ui-app/test-setup/axe";

/**
 * Complementary to button.a11y.test.tsx (which uses the static helper at
 * apps/web/app/utils/test/a11y.tsx). This file runs the full axe-core engine
 * via @toolctrl/ui-app/test-setup/axe to catch issues the static heuristic
 * can't (e.g. aria-disabled vs disabled, redundant roles).
 */
describe("Button axe-core a11y", () => {
  it("text button has no axe violations", async () => {
    await expectNoAxeViolations(<Button>Save changes</Button>);
  });

  it("icon-only button with aria-label has no axe violations", async () => {
    await expectNoAxeViolations(
      <Button aria-label="Close dialog" size="icon">
        <svg viewBox="0 0 24 24" aria-hidden="true">
          <path d="M6 6l12 12M6 18L18 6" />
        </svg>
      </Button>,
    );
  });

  it("arrow-only back button has a translated accessible name", async () => {
    await expectNoAxeViolations(<BackButtonWithTitle href="/settings">Settings</BackButtonWithTitle>);
  });
});