@dtsports/design-system 0.2.0

package/src/test/a11y.test.tsx

@@ -0,0 +1,638 @@
+/**
+ * Accessibility regression suite — every public component renders in a
+ * representative state and must produce zero axe violations.
+ *
+ * Rule config:
+ * - color-contrast is disabled because jsdom has no layout/paint engine;
+ *   contrast is enforced by scripts/check-contrast.mjs against the tokens.
+ * - region / landmark / heading page-level rules are disabled because
+ *   components render standalone here, not inside a page skeleton.
+ */
+import { render } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { axe } from "jest-axe";
+import { describe, expect, it, vi } from "vitest";
+
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Alert,
+  AppMain,
+  AppShell,
+  AspectRatio,
+  Avatar,
+  AvatarGroup,
+  Badge,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  Button,
+  Calendar,
+  CapacityBar,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  Chip,
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+  Combobox,
+  ConfirmAction,
+  Container,
+  DatePicker,
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Drawer,
+  DrawerBody,
+  DrawerContent,
+  DrawerDescription,
+  DrawerHeader,
+  DrawerTitle,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  EmptyState,
+  FormField,
+  Input,
+  Label,
+  LivePill,
+  MetricTile,
+  MoneyBreakdown,
+  NumberInput,
+  Pagination,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Progress,
+  RadioGroup,
+  RadioGroupItem,
+  ScrollArea,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  Sidebar,
+  SidebarBody,
+  SidebarItem,
+  SidebarSection,
+  Skeleton,
+  SkeletonList,
+  SkeletonTable,
+  Slider,
+  Spec,
+  SpecList,
+  Spinner,
+  Stack,
+  StatusPill,
+  Switch,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  ThemeProvider,
+  ThemeToggle,
+  Toaster,
+  ThreeState,
+  Timestamp,
+  TooltipProvider,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  TopBar,
+} from "../index";
+import type { GameStatus } from "../index";
+
+async function expectNoViolations(ui: React.ReactElement) {
+  const { baseElement } = render(ui);
+  // baseElement includes portaled overlay content (document.body).
+  const results = await axe(baseElement, {
+    rules: {
+      "color-contrast": { enabled: false },
+      region: { enabled: false },
+      "page-has-heading-one": { enabled: false },
+      "heading-order": { enabled: false },
+      "landmark-one-main": { enabled: false },
+    },
+  });
+  expect(results).toHaveNoViolations();
+}
+
+describe("forms", () => {
+  it("Button (all variants + icon)", () =>
+    expectNoViolations(
+      <div>
+        <Button variant="accent">Book now</Button>
+        <Button variant="primary">Save</Button>
+        <Button variant="secondary">Cancel</Button>
+        <Button variant="ghost">Edit</Button>
+        <Button variant="destructive">Delete</Button>
+        <Button variant="link">Details</Button>
+        <Button size="icon" aria-label="Settings">
+          ⚙
+        </Button>
+        <Button size="touch">Pay $14</Button>
+      </div>
+    ));
+
+  it("Input + Label via FormField", () =>
+    expectNoViolations(
+      <FormField label="Email" helper="We only email receipts.">
+        <Input type="email" placeholder="you@club.com" />
+      </FormField>
+    ));
+
+  it("Input error state via FormField", () =>
+    expectNoViolations(
+      <FormField label="Email" error="Enter a valid email.">
+        <Input type="email" />
+      </FormField>
+    ));
+
+  it("Checkbox with Label", () =>
+    expectNoViolations(
+      <div>
+        <Checkbox id="waiver" />
+        <Label htmlFor="waiver">Accept waiver</Label>
+      </div>
+    ));
+
+  it("RadioGroup with labels", () =>
+    expectNoViolations(
+      <RadioGroup defaultValue="mixed" aria-label="Skill level">
+        <div>
+          <RadioGroupItem value="mixed" id="r-mixed" />
+          <Label htmlFor="r-mixed">Mixed</Label>
+        </div>
+        <div>
+          <RadioGroupItem value="advanced" id="r-adv" />
+          <Label htmlFor="r-adv">Advanced</Label>
+        </div>
+      </RadioGroup>
+    ));
+
+  it("Switch with label", () =>
+    expectNoViolations(
+      <div>
+        <Switch id="notify" />
+        <Label htmlFor="notify">Email me</Label>
+      </div>
+    ));
+
+  it("NumberInput", () =>
+    expectNoViolations(
+      <NumberInput value={4} onChange={() => {}} aria-label="Players" />
+    ));
+
+  it("Slider", () =>
+    expectNoViolations(
+      <div>
+        <Slider
+          aria-label="Max price"
+          min={0}
+          max={50}
+          step={5}
+          defaultValue={[20]}
+        />
+        <Slider aria-label="Price range" defaultValue={[10, 30]} />
+      </div>
+    ));
+
+  it("Combobox (open)", async () => {
+    const user = userEvent.setup();
+    const { baseElement, getByRole } = render(
+      <Combobox
+        aria-label="Venue"
+        options={[
+          { value: "astoria", label: "Astoria Turf" },
+          { value: "greenpoint", label: "Greenpoint Dome" },
+        ]}
+        value="astoria"
+        onValueChange={() => {}}
+      />
+    );
+    await user.click(getByRole("combobox"));
+    expect(
+      await axe(baseElement, {
+        rules: {
+          "color-contrast": { enabled: false },
+          region: { enabled: false },
+        },
+      })
+    ).toHaveNoViolations();
+  });
+
+  it("Calendar + DatePicker (closed)", () =>
+    expectNoViolations(
+      <div>
+        <Calendar mode="single" selected={new Date(2026, 6, 4)} />
+        <DatePicker
+          aria-label="Game date"
+          value={new Date(2026, 6, 4)}
+          onValueChange={() => {}}
+        />
+      </div>
+    ));
+
+  it("Select (open)", () =>
+    expectNoViolations(
+      <Select defaultOpen defaultValue="soccer">
+        <SelectTrigger aria-label="Sport">
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value="soccer">Soccer</SelectItem>
+          <SelectItem value="snooker">Snooker</SelectItem>
+        </SelectContent>
+      </Select>
+    ));
+});
+
+describe("display", () => {
+  it("Badge variants", () =>
+    expectNoViolations(
+      <div>
+        <Badge variant="success">Paid</Badge>
+        <Badge variant="warning">Filling</Badge>
+        <Badge variant="danger">Cancelled</Badge>
+        <Badge variant="info">New</Badge>
+      </div>
+    ));
+
+  it("Chip removable", () =>
+    expectNoViolations(<Chip onRemove={() => {}}>Astoria Turf</Chip>));
+
+  it("Card composite", () =>
+    expectNoViolations(
+      <Card>
+        <CardHeader>
+          <CardTitle>Saturday games</CardTitle>
+          <CardDescription>3 venues · 6 games</CardDescription>
+        </CardHeader>
+        <CardContent>Body</CardContent>
+        <CardFooter>Footer</CardFooter>
+      </Card>
+    ));
+
+  it("Table composite", () =>
+    expectNoViolations(
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Player</TableHead>
+            <TableHead>Paid</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          <TableRow>
+            <TableCell>Dana</TableCell>
+            <TableCell>$14</TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    ));
+
+  it("Avatar + AvatarGroup", () =>
+    expectNoViolations(
+      <AvatarGroup label="3 players booked">
+        <Avatar name="Dana Tran" />
+        <Avatar name="Alex Kim" status="checked-in" />
+        <Avatar name="Sam Ortiz" />
+      </AvatarGroup>
+    ));
+
+  it("Separator, SpecList, Progress, Skeleton, Spinner", () =>
+    expectNoViolations(
+      <div>
+        <Separator />
+        <SpecList>
+          <Spec label="Venue">Astoria Turf</Spec>
+          <Spec label="Price">$14</Spec>
+        </SpecList>
+        <Progress value={60} aria-label="Capacity" />
+        <Skeleton className="h-4 w-24" />
+        <Spinner />
+      </div>
+    ));
+
+  it("Pagination", () =>
+    expectNoViolations(
+      <Pagination currentPage={3} totalPages={10} onPageChange={() => {}} />
+    ));
+});
+
+describe("feedback", () => {
+  it("Alert variants + dismissible", () =>
+    expectNoViolations(
+      <div>
+        <Alert variant="info" title="Heads up">
+          Kickoff moved to 6pm.
+        </Alert>
+        <Alert
+          variant="danger"
+          title="Payment failed"
+          dismissible
+          onDismiss={() => {}}
+        >
+          Card declined.
+        </Alert>
+      </div>
+    ));
+
+  it("EmptyState", () =>
+    expectNoViolations(
+      <EmptyState
+        title="No games yet"
+        description="Create your first game."
+        action={<Button>Create game</Button>}
+      />
+    ));
+
+  it("SkeletonList + SkeletonTable", () =>
+    expectNoViolations(
+      <div>
+        <SkeletonList rows={3} />
+        <SkeletonTable rows={2} columns={3} />
+      </div>
+    ));
+
+  it("ThreeState — all four states", async () => {
+    const empty = { title: "Nothing here" };
+    await expectNoViolations(
+      <div>
+        <ThreeState state={{ kind: "loading" }} empty={empty}>
+          x
+        </ThreeState>
+        <ThreeState state={{ kind: "empty" }} empty={empty}>
+          x
+        </ThreeState>
+        <ThreeState
+          state={{
+            kind: "error",
+            error: new Error("Network down"),
+            retry: () => {},
+          }}
+          empty={empty}
+        >
+          x
+        </ThreeState>
+        <ThreeState state={{ kind: "data", data: [1] }} empty={empty}>
+          <ul>
+            <li>Row</li>
+          </ul>
+        </ThreeState>
+      </div>
+    );
+  });
+});
+
+describe("overlays (open)", () => {
+  it("Dialog", () =>
+    expectNoViolations(
+      <Dialog defaultOpen>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Cancel game?</DialogTitle>
+            <DialogDescription>8 players will be refunded.</DialogDescription>
+          </DialogHeader>
+          <DialogBody>Body</DialogBody>
+          <DialogFooter>
+            <Button variant="secondary">Keep game</Button>
+            <Button variant="destructive">Cancel game</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    ));
+
+  it("Drawer", () =>
+    expectNoViolations(
+      <Drawer defaultOpen>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>Filters</DrawerTitle>
+            <DrawerDescription>Narrow the list.</DrawerDescription>
+          </DrawerHeader>
+          <DrawerBody>Body</DrawerBody>
+        </DrawerContent>
+      </Drawer>
+    ));
+
+  it("Popover", () =>
+    expectNoViolations(
+      <Popover defaultOpen>
+        <PopoverTrigger asChild>
+          <Button variant="secondary">Open</Button>
+        </PopoverTrigger>
+        <PopoverContent aria-label="Filters">Popover body</PopoverContent>
+      </Popover>
+    ));
+
+  it("DropdownMenu", () =>
+    expectNoViolations(
+      <DropdownMenu defaultOpen>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost">Actions</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
+          <DropdownMenuLabel>Game</DropdownMenuLabel>
+          <DropdownMenuItem>Edit</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Duplicate</DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    ));
+
+  it("Tooltip", () =>
+    expectNoViolations(
+      <TooltipProvider>
+        <Tooltip defaultOpen>
+          <TooltipTrigger asChild>
+            <Button variant="ghost">7:30 PM EDT</Button>
+          </TooltipTrigger>
+          <TooltipContent>Your time: 4:30 PM PDT</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    ));
+
+  it("ConfirmAction (closed trigger)", () =>
+    expectNoViolations(
+      <ConfirmAction
+        title="Cancel game?"
+        consequence="8 players will be refunded $14 each."
+        confirmLabel="Cancel game"
+        onConfirm={() => {}}
+      >
+        <Button variant="destructive">Cancel game</Button>
+      </ConfirmAction>
+    ));
+});
+
+describe("navigation & disclosure", () => {
+  it("Accordion", () =>
+    expectNoViolations(
+      <Accordion type="single" collapsible defaultValue="a">
+        <AccordionItem value="a">
+          <AccordionTrigger>Rules</AccordionTrigger>
+          <AccordionContent>No slide tackles.</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    ));
+
+  it("Tabs", () =>
+    expectNoViolations(
+      <Tabs defaultValue="upcoming">
+        <TabsList>
+          <TabsTrigger value="upcoming">Upcoming</TabsTrigger>
+          <TabsTrigger value="past">Past</TabsTrigger>
+        </TabsList>
+        <TabsContent value="upcoming">Upcoming games</TabsContent>
+        <TabsContent value="past">Past games</TabsContent>
+      </Tabs>
+    ));
+
+  it("Collapsible (open)", () =>
+    expectNoViolations(
+      <Collapsible defaultOpen>
+        <CollapsibleTrigger>Advanced options</CollapsibleTrigger>
+        <CollapsibleContent>More settings here.</CollapsibleContent>
+      </Collapsible>
+    ));
+
+  it("Breadcrumb", () =>
+    expectNoViolations(
+      <Breadcrumb>
+        <BreadcrumbList>
+          <BreadcrumbItem>
+            <BreadcrumbLink href="/games">Games</BreadcrumbLink>
+          </BreadcrumbItem>
+          <BreadcrumbSeparator />
+          <BreadcrumbItem>
+            <BreadcrumbPage>Saturday 6pm</BreadcrumbPage>
+          </BreadcrumbItem>
+        </BreadcrumbList>
+      </Breadcrumb>
+    ));
+});
+
+describe("layout & shell", () => {
+  it("AppShell composite", () =>
+    expectNoViolations(
+      <AppShell>
+        <Sidebar>
+          <SidebarBody>
+            <SidebarSection title="Manage">
+              <SidebarItem href="/games" active>
+                Games
+              </SidebarItem>
+              <SidebarItem href="/venues">Venues</SidebarItem>
+            </SidebarSection>
+          </SidebarBody>
+        </Sidebar>
+        <AppMain>
+          <TopBar>Games</TopBar>
+          <Container>
+            <Stack gap={4}>
+              <ScrollArea className="h-24">Scrollable</ScrollArea>
+              <AspectRatio ratio={16 / 9}>
+                <div>Media</div>
+              </AspectRatio>
+            </Stack>
+          </Container>
+        </AppMain>
+      </AppShell>
+    ));
+});
+
+describe("brand & patterns", () => {
+  it("StatusPill — every status", () =>
+    expectNoViolations(
+      <div>
+        {(
+          [
+            "draft",
+            "scheduled",
+            "filling",
+            "sold_out",
+            "live",
+            "completed",
+            "cancelled",
+          ] as GameStatus[]
+        ).map((s) => (
+          <StatusPill key={s} status={s} />
+        ))}
+      </div>
+    ));
+
+  it("LivePill, MetricTile, CapacityBar", () =>
+    expectNoViolations(
+      <div>
+        <LivePill />
+        <MetricTile
+          label="Revenue"
+          value="$1,204"
+          delta={12}
+          deltaLabel="vs last week"
+        />
+        <CapacityBar filled={8} capacity={10} showCount />
+      </div>
+    ));
+
+  it("Timestamp", () =>
+    expectNoViolations(
+      <TooltipProvider>
+        <Timestamp iso="2026-07-04T22:00:00Z" venueTz="America/New_York" />
+      </TooltipProvider>
+    ));
+
+  it("MoneyBreakdown", () =>
+    expectNoViolations(
+      <MoneyBreakdown
+        lines={[
+          { label: "Game fee", cents: 1400 },
+          { label: "Credit applied", cents: -400, muted: true },
+        ]}
+        totalCents={1000}
+      />
+    ));
+});
+
+describe("theming", () => {
+  it("ThemeProvider + ThemeToggle", async () => {
+    vi.stubGlobal("localStorage", {
+      getItem: () => null,
+      setItem: () => {},
+      removeItem: () => {},
+    });
+    await expectNoViolations(
+      <ThemeProvider>
+        <ThemeToggle />
+        <Toaster />
+      </ThemeProvider>
+    );
+    vi.unstubAllGlobals();
+  });
+});