40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import "@testing-library/jest-dom";
|
|
import * as React from "react";
|
|
import { describe, it } from "vitest";
|
|
|
|
import { Button } from "./button";
|
|
import { Input } from "./input";
|
|
import { Label } from "./label";
|
|
import { expectNoAxeViolations } from "@toolctrl/ui-app/test-setup/axe";
|
|
|
|
describe("Form composition axe-core a11y", () => {
|
|
it("login-shaped form (label/input/required/submit) has no axe violations", async () => {
|
|
await expectNoAxeViolations(
|
|
<form aria-labelledby="signin-heading">
|
|
<h2 id="signin-heading">Sign in</h2>
|
|
|
|
<div>
|
|
<Label htmlFor="login-email">Email</Label>
|
|
<Input id="login-email" name="email" type="email" autoComplete="email" required aria-required="true" />
|
|
</div>
|
|
|
|
<div>
|
|
<Label htmlFor="login-password">Password</Label>
|
|
<Input
|
|
id="login-password"
|
|
name="password"
|
|
type="password"
|
|
autoComplete="current-password"
|
|
required
|
|
aria-required="true"
|
|
aria-describedby="login-password-help"
|
|
/>
|
|
<p id="login-password-help">At least 12 characters.</p>
|
|
</div>
|
|
|
|
<Button type="submit">Sign in</Button>
|
|
</form>,
|
|
);
|
|
});
|
|
});
|