@object-ui/components 2.0.0 → 3.0.0

package/src/__tests__/__snapshots__/snapshot.test.tsx.snap

@@ -0,0 +1,327 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Badge snapshots > renders variant="default" 1`] = `
+<div
+  class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80"
+>
+  Label
+</div>
+`;
+
+exports[`Badge snapshots > renders variant="destructive" 1`] = `
+<div
+  class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80"
+>
+  Label
+</div>
+`;
+
+exports[`Badge snapshots > renders variant="outline" 1`] = `
+<div
+  class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground"
+>
+  Label
+</div>
+`;
+
+exports[`Badge snapshots > renders variant="secondary" 1`] = `
+<div
+  class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"
+>
+  Label
+</div>
+`;
+
+exports[`Badge snapshots > renders with custom className 1`] = `
+<div
+  class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80 custom-class"
+>
+  Custom
+</div>
+`;
+
+exports[`Button snapshots > renders disabled state 1`] = `
+<button
+  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
+  disabled=""
+>
+  Disabled
+</button>
+`;
+
+exports[`Button snapshots > renders size="icon" 1`] = `
+<button
+  aria-label="Icon button"
+  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 w-10"
+>
+  ★
+</button>
+`;
+
+exports[`Button snapshots > renders size="lg" 1`] = `
+<button
+  class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-11 rounded-md px-8"
+>
+  Large
+</button>
+`;
+
+exports[`Button snapshots > renders size="sm" 1`] = `
+<button
+  class="inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-9 rounded-md px-3"
+>
+  Small
+</button>
+`;
+
+exports[`Button snapshots > renders variant="default" 1`] = `
+<button
+  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
+>
+  Click me
+</button>
+`;
+
+exports[`Button snapshots > renders variant="destructive" 1`] = `
+<button
+  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-destructive text-destructive-foreground hover:bg-destructive/90 h-10 px-4 py-2"
+>
+  Click me
+</button>
+`;
+
+exports[`Button snapshots > renders variant="ghost" 1`] = `
+<button
+  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
+>
+  Click me
+</button>
+`;
+
+exports[`Button snapshots > renders variant="link" 1`] = `
+<button
+  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-primary underline-offset-4 hover:underline h-10 px-4 py-2"
+>
+  Click me
+</button>
+`;
+
+exports[`Button snapshots > renders variant="outline" 1`] = `
+<button
+  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
+>
+  Click me
+</button>
+`;
+
+exports[`Button snapshots > renders variant="secondary" 1`] = `
+<button
+  class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-secondary text-secondary-foreground hover:bg-secondary/80 h-10 px-4 py-2"
+>
+  Click me
+</button>
+`;
+
+exports[`Card snapshots > renders content-only card 1`] = `
+<div
+  class="rounded-lg border bg-card text-card-foreground shadow-sm"
+>
+  <div
+    class="p-6 pt-0"
+  >
+    Just content
+  </div>
+</div>
+`;
+
+exports[`Card snapshots > renders header-only card 1`] = `
+<div
+  class="rounded-lg border bg-card text-card-foreground shadow-sm"
+>
+  <div
+    class="flex flex-col space-y-1.5 p-6"
+  >
+    <div
+      class="text-2xl font-semibold leading-none tracking-tight"
+    >
+      Minimal Card
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Card snapshots > renders with custom className 1`] = `
+<div
+  class="rounded-lg border bg-card text-card-foreground w-96 shadow-lg"
+>
+  <div
+    class="p-6 pt-0"
+  >
+    Styled card
+  </div>
+</div>
+`;
+
+exports[`Card snapshots > renders with header, content, and footer 1`] = `
+<div
+  class="rounded-lg border bg-card text-card-foreground shadow-sm"
+>
+  <div
+    class="flex flex-col space-y-1.5 p-6"
+  >
+    <div
+      class="text-2xl font-semibold leading-none tracking-tight"
+    >
+      Card Title
+    </div>
+    <div
+      class="text-sm text-muted-foreground"
+    >
+      A brief description
+    </div>
+  </div>
+  <div
+    class="p-6 pt-0"
+  >
+    <p>
+      Card body content
+    </p>
+  </div>
+  <div
+    class="flex items-center p-6 pt-0"
+  >
+    <button
+      class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 py-2"
+    >
+      Action
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Empty state snapshots > renders empty media with default variant 1`] = `
+<div
+  class="flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-transparent"
+  data-slot="empty-icon"
+  data-variant="default"
+>
+  <span>
+    🔍
+  </span>
+</div>
+`;
+
+exports[`Empty state snapshots > renders full empty state with media, title, description, and content 1`] = `
+<div
+  class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12"
+  data-slot="empty"
+>
+  <div
+    class="flex max-w-sm flex-col items-center gap-2 text-center"
+    data-slot="empty-header"
+  >
+    <div
+      class="mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
+      data-slot="empty-icon"
+      data-variant="icon"
+    >
+      <span>
+        📭
+      </span>
+    </div>
+    <div
+      class="text-lg font-medium tracking-tight"
+      data-slot="empty-title"
+    >
+      No results found
+    </div>
+    <div
+      class="text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4"
+      data-slot="empty-description"
+    >
+      Try adjusting your search or filter criteria.
+    </div>
+  </div>
+  <div
+    class="flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance"
+    data-slot="empty-content"
+  >
+    <button
+      class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
+    >
+      Clear filters
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Empty state snapshots > renders minimal empty state with title only 1`] = `
+<div
+  class="flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12"
+  data-slot="empty"
+>
+  <div
+    class="flex max-w-sm flex-col items-center gap-2 text-center"
+    data-slot="empty-header"
+  >
+    <div
+      class="text-lg font-medium tracking-tight"
+      data-slot="empty-title"
+    >
+      Nothing here yet
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Spinner snapshots > renders default spinner 1`] = `
+<div
+  aria-label="Loading"
+  class="flex items-center justify-center"
+  role="status"
+>
+  <svg
+    aria-hidden="true"
+    class="lucide lucide-loader-circle animate-spin text-muted-foreground w-full h-full min-w-4 min-h-4"
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M21 12a9 9 0 1 1-6.219-8.56"
+    />
+  </svg>
+</div>
+`;
+
+exports[`Spinner snapshots > renders with custom className 1`] = `
+<div
+  aria-label="Loading"
+  class="flex items-center justify-center h-8 w-8"
+  role="status"
+>
+  <svg
+    aria-hidden="true"
+    class="lucide lucide-loader-circle animate-spin text-muted-foreground w-full h-full min-w-4 min-h-4"
+    fill="none"
+    height="24"
+    stroke="currentColor"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    width="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M21 12a9 9 0 1 1-6.219-8.56"
+    />
+  </svg>
+</div>
+`;

package/src/__tests__/accessibility.test.tsx

@@ -0,0 +1,137 @@
+/**
+ * ObjectUI
+ * Copyright (c) 2024-present ObjectStack Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Axe-core accessibility test suite for ObjectUI Shadcn components.
+ *
+ * Tests core UI primitives against WCAG 2.1 AA standards using axe-core.
+ * Part of Q1 2026 roadmap §1.4 Test Coverage Improvement.
+ */
+
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { axe } from 'vitest-axe';
+import React from 'react';
+import {
+  Button,
+  Badge,
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  Input,
+  Label,
+  Skeleton,
+} from '@object-ui/components';
+
+/**
+ * Helper to assert no axe violations.
+ * Works with vitest-axe's AxeResults format.
+ */
+async function expectNoViolations(container: HTMLElement) {
+  const results = await axe(container);
+  const violations = results.violations || [];
+  if (violations.length > 0) {
+    const messages = violations.map(
+      (v: any) => `[${v.impact}] ${v.id}: ${v.description} (${v.nodes.length} instance(s))`
+    );
+    throw new Error(`Expected no accessibility violations, but found ${violations.length}:\n${messages.join('\n')}`);
+  }
+}
+
+describe('Accessibility — axe-core (WCAG 2.1 AA)', () => {
+  it('Button should have no a11y violations', async () => {
+    const { container } = render(<Button>Click me</Button>);
+    await expectNoViolations(container);
+  });
+
+  it('Icon-only Button with aria-label should have no violations', async () => {
+    const { container } = render(
+      <Button aria-label="Close" size="icon">
+        ✕
+      </Button>
+    );
+    await expectNoViolations(container);
+  });
+
+  it('Badge should have no a11y violations', async () => {
+    const { container } = render(<Badge>Status</Badge>);
+    await expectNoViolations(container);
+  });
+
+  it('Card with proper heading hierarchy should have no violations', async () => {
+    const { container } = render(
+      <Card>
+        <CardHeader>
+          <CardTitle>Card Title</CardTitle>
+          <CardDescription>Card description text</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <p>Card content</p>
+        </CardContent>
+      </Card>
+    );
+    await expectNoViolations(container);
+  });
+
+  it('Input with associated Label should have no violations', async () => {
+    const { container } = render(
+      <div>
+        <Label htmlFor="email">Email</Label>
+        <Input id="email" type="email" placeholder="Enter email" />
+      </div>
+    );
+    await expectNoViolations(container);
+  });
+
+  it('Input with aria-label should have no violations', async () => {
+    const { container } = render(
+      <Input aria-label="Search" type="search" placeholder="Search..." />
+    );
+    await expectNoViolations(container);
+  });
+
+  it('Skeleton should have no a11y violations', async () => {
+    const { container } = render(
+      <div role="status" aria-label="Loading">
+        <Skeleton className="h-10 w-full" />
+        <Skeleton className="h-4 w-3/4" />
+      </div>
+    );
+    await expectNoViolations(container);
+  });
+
+  it('Multiple Buttons in a group should have no violations', async () => {
+    const { container } = render(
+      <div role="group" aria-label="Actions">
+        <Button variant="default">Save</Button>
+        <Button variant="outline">Cancel</Button>
+        <Button variant="destructive">Delete</Button>
+      </div>
+    );
+    await expectNoViolations(container);
+  });
+
+  it('Form with proper labels should have no violations', async () => {
+    const { container } = render(
+      <form aria-label="Login form">
+        <div>
+          <Label htmlFor="username">Username</Label>
+          <Input id="username" type="text" />
+        </div>
+        <div>
+          <Label htmlFor="password">Password</Label>
+          <Input id="password" type="password" />
+        </div>
+        <Button type="submit">Sign In</Button>
+      </form>
+    );
+    await expectNoViolations(container);
+  });
+});