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

import { Input } from "./input";
import { Label } from "./label";
import { expectNoAxeViolations } from "@toolctrl/ui-app/test-setup/axe";

describe("Input axe-core a11y", () => {
  it("paired with a <Label htmlFor> has no axe violations", async () => {
    await expectNoAxeViolations(
      <div>
        <Label htmlFor="email">Email address</Label>
        <Input id="email" type="email" />
      </div>,
    );
  });

  it("uses aria-invalid + aria-describedby for an error state without violations", async () => {
    await expectNoAxeViolations(
      <div>
        <Label htmlFor="pw">Password</Label>
        <Input id="pw" type="password" aria-invalid="true" aria-describedby="pw-err" />
        <div id="pw-err" role="alert">
          Password is required.
        </div>
      </div>,
    );
  });
});