@fragments-sdk/ui 0.7.4 → 0.7.5

package/src/components/Toast/Toast.test.tsx

@@ -0,0 +1,192 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen, userEvent, act, waitFor, expectNoA11yViolations } from '../../test/utils';
+import { Toast, useToast, ToastProvider } from './index';
+
+// Helper component to trigger toasts via the hook
+function ToastTrigger({
+  variant,
+  title = 'Test Toast',
+  description,
+  duration,
+  action,
+}: {
+  variant?: 'default' | 'success' | 'error' | 'warning' | 'info';
+  title?: string;
+  description?: string;
+  duration?: number;
+  action?: { label: string; onClick: () => void };
+}) {
+  const { toast } = useToast();
+  return (
+    <button
+      onClick={() => toast({ title, description, variant, duration, action })}
+    >
+      Show Toast
+    </button>
+  );
+}
+
+function renderWithProvider(
+  ui: React.ReactElement,
+  providerProps: Partial<React.ComponentProps<typeof ToastProvider>> = {}
+) {
+  return render(
+    <ToastProvider {...providerProps}>
+      {ui}
+    </ToastProvider>
+  );
+}
+
+describe('Toast', () => {
+  beforeEach(() => {
+    vi.useFakeTimers({ shouldAdvanceTime: true });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it('renders a toast when triggered via useToast hook', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    renderWithProvider(<ToastTrigger title="Hello Toast" />);
+
+    await user.click(screen.getByRole('button', { name: /show toast/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText('Hello Toast')).toBeInTheDocument();
+    });
+  });
+
+  it('renders title and description', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    renderWithProvider(
+      <ToastTrigger title="Title" description="Description text" />
+    );
+
+    await user.click(screen.getByRole('button', { name: /show toast/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText('Title')).toBeInTheDocument();
+      expect(screen.getByText('Description text')).toBeInTheDocument();
+    });
+  });
+
+  it('uses role="alert" for error variant', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    renderWithProvider(<ToastTrigger variant="error" title="Error!" />);
+
+    await user.click(screen.getByRole('button', { name: /show toast/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+  });
+
+  it('uses role="alert" for warning variant', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    renderWithProvider(<ToastTrigger variant="warning" title="Warning!" />);
+
+    await user.click(screen.getByRole('button', { name: /show toast/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('alert')).toBeInTheDocument();
+    });
+  });
+
+  it('uses role="status" for default/success/info variants', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    renderWithProvider(<ToastTrigger variant="success" title="Success!" />);
+
+    await user.click(screen.getByRole('button', { name: /show toast/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('status')).toBeInTheDocument();
+    });
+  });
+
+  it('dismiss button has aria-label', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    renderWithProvider(<ToastTrigger title="Dismissable" />);
+
+    await user.click(screen.getByRole('button', { name: /show toast/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /dismiss notification/i })).toBeInTheDocument();
+    });
+  });
+
+  it('dismisses when dismiss button is clicked', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    renderWithProvider(<ToastTrigger title="To Dismiss" duration={0} />);
+
+    await user.click(screen.getByRole('button', { name: /show toast/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText('To Dismiss')).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByRole('button', { name: /dismiss notification/i }));
+
+    await waitFor(() => {
+      expect(screen.queryByText('To Dismiss')).not.toBeInTheDocument();
+    });
+  });
+
+  it('auto-dismisses after duration', async () => {
+    renderWithProvider(
+      <ToastTrigger title="Auto Dismiss" duration={3000} />,
+      { duration: 3000 }
+    );
+
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    await user.click(screen.getByRole('button', { name: /show toast/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText('Auto Dismiss')).toBeInTheDocument();
+    });
+
+    await act(async () => {
+      vi.advanceTimersByTime(4000);
+    });
+
+    await waitFor(() => {
+      expect(screen.queryByText('Auto Dismiss')).not.toBeInTheDocument();
+    });
+  });
+
+  it('renders action button when action is provided', async () => {
+    const onClick = vi.fn();
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    renderWithProvider(
+      <ToastTrigger
+        title="With Action"
+        duration={0}
+        action={{ label: 'Undo', onClick }}
+      />
+    );
+
+    await user.click(screen.getByRole('button', { name: /show toast/i }));
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /undo/i })).toBeInTheDocument();
+    });
+
+    await user.click(screen.getByRole('button', { name: /undo/i }));
+    expect(onClick).toHaveBeenCalled();
+  });
+
+  it('has no accessibility violations', async () => {
+    const user = userEvent.setup({ advanceTimers: vi.advanceTimersByTime });
+    const { container } = renderWithProvider(
+      <ToastTrigger title="Accessible Toast" variant="info" />
+    );
+
+    await user.click(screen.getByRole('button', { name: /show toast/i }));
+
+    await waitFor(() => {
+      expect(screen.getByText('Accessible Toast')).toBeInTheDocument();
+    });
+
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/Toast/index.tsx

@@ -201,7 +201,13 @@ function ToastItem({
       aria-labelledby={titleId}
       aria-describedby={descId}
       onMouseEnter={onPause}
-      onMouseLeave={onResume}
+      onMouseLeave={() => {
+        requestAnimationFrame(() => {
+          if (!toastRef.current?.contains(document.activeElement)) {
+            onResume?.();
+          }
+        });
+      }}
       onFocusCapture={onPause}
       onBlurCapture={() => {
         requestAnimationFrame(() => {
@@ -268,7 +274,7 @@ function ToastContainer({
   // Always render the container for screen reader live region to work properly
   // The live region must exist before announcements are made
   return (
-    <div className={containerClasses} aria-label="Notifications">
+    <div className={containerClasses} role="region" aria-label="Notifications">
       {toasts.map((toast) => (
         <ToastItem
           key={toast.id}
@@ -380,7 +386,9 @@ export function ToastProvider({
   }, [scheduleRemoval]);
 
   const clearToasts = React.useCallback(() => {
-    timeoutRef.current.forEach((timeout) => clearTimeout(timeout));
+    timeoutRef.current.forEach((timeout) => {
+      clearTimeout(timeout);
+    });
     timeoutRef.current.clear();
     remainingRef.current.clear();
     startTimeRef.current.clear();
@@ -389,7 +397,9 @@ export function ToastProvider({
 
   React.useEffect(
     () => () => {
-      timeoutRef.current.forEach((timeout) => clearTimeout(timeout));
+      timeoutRef.current.forEach((timeout) => {
+        clearTimeout(timeout);
+      });
       timeoutRef.current.clear();
       remainingRef.current.clear();
       startTimeRef.current.clear();

package/src/components/Toggle/Toggle.test.tsx

@@ -0,0 +1,49 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { Toggle } from './index';
+
+describe('Toggle', () => {
+  it('renders a switch role', () => {
+    render(<Toggle aria-label="Dark mode" />);
+    expect(screen.getByRole('switch')).toBeInTheDocument();
+  });
+
+  it('is unchecked by default', () => {
+    render(<Toggle aria-label="Dark mode" />);
+    expect(screen.getByRole('switch')).not.toBeChecked();
+  });
+
+  it('renders as checked when checked prop is true', () => {
+    render(<Toggle aria-label="Dark mode" checked onChange={() => {}} />);
+    expect(screen.getByRole('switch')).toBeChecked();
+  });
+
+  it('renders label text', () => {
+    render(<Toggle label="Dark mode" />);
+    expect(screen.getByText('Dark mode')).toBeInTheDocument();
+  });
+
+  it('renders description text', () => {
+    render(<Toggle label="Notifications" description="Enable push alerts" />);
+    expect(screen.getByText('Enable push alerts')).toBeInTheDocument();
+  });
+
+  it('disables the switch', () => {
+    render(<Toggle aria-label="Dark mode" disabled />);
+    expect(screen.getByRole('switch')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  it('calls onChange with the new value on click', async () => {
+    const handleChange = vi.fn();
+    const user = userEvent.setup();
+    render(<Toggle aria-label="Dark mode" onChange={handleChange} />);
+    await user.click(screen.getByRole('switch'));
+    expect(handleChange).toHaveBeenCalled();
+    expect(handleChange.mock.calls[0][0]).toBe(true);
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<Toggle aria-label="Accessible toggle" />);
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/ToggleGroup/ToggleGroup.fragment.tsx

@@ -2,6 +2,96 @@ import React from 'react';
 import { defineSegment } from '@fragments/core';
 import { ToggleGroup } from '.';
 
+function DefaultExample() {
+  const [value, setValue] = React.useState('left');
+
+  return (
+    <ToggleGroup value={value} onChange={setValue}>
+      <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
+      <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
+      <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
+    </ToggleGroup>
+  );
+}
+
+function PillsExample() {
+  const [value, setValue] = React.useState('all');
+
+  return (
+    <ToggleGroup value={value} onChange={setValue} variant="pills">
+      <ToggleGroup.Item value="all">All</ToggleGroup.Item>
+      <ToggleGroup.Item value="active">Active</ToggleGroup.Item>
+      <ToggleGroup.Item value="completed">Completed</ToggleGroup.Item>
+    </ToggleGroup>
+  );
+}
+
+function OutlineExample() {
+  const [value, setValue] = React.useState('day');
+
+  return (
+    <ToggleGroup value={value} onChange={setValue} variant="outline">
+      <ToggleGroup.Item value="day">Day</ToggleGroup.Item>
+      <ToggleGroup.Item value="week">Week</ToggleGroup.Item>
+      <ToggleGroup.Item value="month">Month</ToggleGroup.Item>
+    </ToggleGroup>
+  );
+}
+
+function SizesExample() {
+  const [value1, setValue1] = React.useState('a');
+  const [value2, setValue2] = React.useState('a');
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
+      <ToggleGroup value={value1} onChange={setValue1} size="sm">
+        <ToggleGroup.Item value="a">Small</ToggleGroup.Item>
+        <ToggleGroup.Item value="b">Size</ToggleGroup.Item>
+      </ToggleGroup>
+      <ToggleGroup value={value2} onChange={setValue2} size="md">
+        <ToggleGroup.Item value="a">Medium</ToggleGroup.Item>
+        <ToggleGroup.Item value="b">Size</ToggleGroup.Item>
+      </ToggleGroup>
+    </div>
+  );
+}
+
+function ViewSwitcherExample() {
+  const [view, setView] = React.useState('grid');
+
+  return (
+    <ToggleGroup value={view} onChange={setView} size="sm">
+      <ToggleGroup.Item value="grid">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <rect x="3" y="3" width="7" height="7" />
+          <rect x="14" y="3" width="7" height="7" />
+          <rect x="3" y="14" width="7" height="7" />
+          <rect x="14" y="14" width="7" height="7" />
+        </svg>
+      </ToggleGroup.Item>
+      <ToggleGroup.Item value="list">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <line x1="3" y1="6" x2="21" y2="6" />
+          <line x1="3" y1="12" x2="21" y2="12" />
+          <line x1="3" y1="18" x2="21" y2="18" />
+        </svg>
+      </ToggleGroup.Item>
+    </ToggleGroup>
+  );
+}
+
+function DisabledItemExample() {
+  const [value, setValue] = React.useState('basic');
+
+  return (
+    <ToggleGroup value={value} onChange={setValue}>
+      <ToggleGroup.Item value="basic">Basic</ToggleGroup.Item>
+      <ToggleGroup.Item value="pro">Pro</ToggleGroup.Item>
+      <ToggleGroup.Item value="enterprise" disabled>Enterprise</ToggleGroup.Item>
+    </ToggleGroup>
+  );
+}
+
 export default defineSegment({
   component: ToggleGroup,
 
@@ -104,104 +194,32 @@ export default defineSegment({
     {
       name: 'Default',
       description: 'Basic toggle group',
-      render: () => {
-        const [value, setValue] = React.useState('left');
-        return (
-          <ToggleGroup value={value} onChange={setValue}>
-            <ToggleGroup.Item value="left">Left</ToggleGroup.Item>
-            <ToggleGroup.Item value="center">Center</ToggleGroup.Item>
-            <ToggleGroup.Item value="right">Right</ToggleGroup.Item>
-          </ToggleGroup>
-        );
-      },
+      render: () => <DefaultExample />,
     },
     {
       name: 'Pills Variant',
       description: 'Pill-shaped toggle buttons',
-      render: () => {
-        const [value, setValue] = React.useState('all');
-        return (
-          <ToggleGroup value={value} onChange={setValue} variant="pills">
-            <ToggleGroup.Item value="all">All</ToggleGroup.Item>
-            <ToggleGroup.Item value="active">Active</ToggleGroup.Item>
-            <ToggleGroup.Item value="completed">Completed</ToggleGroup.Item>
-          </ToggleGroup>
-        );
-      },
+      render: () => <PillsExample />,
     },
     {
       name: 'Outline Variant',
       description: 'Outlined toggle buttons',
-      render: () => {
-        const [value, setValue] = React.useState('day');
-        return (
-          <ToggleGroup value={value} onChange={setValue} variant="outline">
-            <ToggleGroup.Item value="day">Day</ToggleGroup.Item>
-            <ToggleGroup.Item value="week">Week</ToggleGroup.Item>
-            <ToggleGroup.Item value="month">Month</ToggleGroup.Item>
-          </ToggleGroup>
-        );
-      },
+      render: () => <OutlineExample />,
     },
     {
       name: 'Sizes',
       description: 'Different size variants',
-      render: () => {
-        const [value1, setValue1] = React.useState('a');
-        const [value2, setValue2] = React.useState('a');
-        return (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
-            <ToggleGroup value={value1} onChange={setValue1} size="sm">
-              <ToggleGroup.Item value="a">Small</ToggleGroup.Item>
-              <ToggleGroup.Item value="b">Size</ToggleGroup.Item>
-            </ToggleGroup>
-            <ToggleGroup value={value2} onChange={setValue2} size="md">
-              <ToggleGroup.Item value="a">Medium</ToggleGroup.Item>
-              <ToggleGroup.Item value="b">Size</ToggleGroup.Item>
-            </ToggleGroup>
-          </div>
-        );
-      },
+      render: () => <SizesExample />,
     },
     {
       name: 'View Switcher',
       description: 'Common pattern for switching between views',
-      render: () => {
-        const [view, setView] = React.useState('grid');
-        return (
-          <ToggleGroup value={view} onChange={setView} size="sm">
-            <ToggleGroup.Item value="grid">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <rect x="3" y="3" width="7" height="7" />
-                <rect x="14" y="3" width="7" height="7" />
-                <rect x="3" y="14" width="7" height="7" />
-                <rect x="14" y="14" width="7" height="7" />
-              </svg>
-            </ToggleGroup.Item>
-            <ToggleGroup.Item value="list">
-              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                <line x1="3" y1="6" x2="21" y2="6" />
-                <line x1="3" y1="12" x2="21" y2="12" />
-                <line x1="3" y1="18" x2="21" y2="18" />
-              </svg>
-            </ToggleGroup.Item>
-          </ToggleGroup>
-        );
-      },
+      render: () => <ViewSwitcherExample />,
     },
     {
       name: 'With Disabled Item',
       description: 'Toggle group with a disabled option',
-      render: () => {
-        const [value, setValue] = React.useState('basic');
-        return (
-          <ToggleGroup value={value} onChange={setValue}>
-            <ToggleGroup.Item value="basic">Basic</ToggleGroup.Item>
-            <ToggleGroup.Item value="pro">Pro</ToggleGroup.Item>
-            <ToggleGroup.Item value="enterprise" disabled>Enterprise</ToggleGroup.Item>
-          </ToggleGroup>
-        );
-      },
+      render: () => <DisabledItemExample />,
     },
   ],
 });

package/src/components/ToggleGroup/ToggleGroup.test.tsx

@@ -0,0 +1,90 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, userEvent, expectNoA11yViolations } from '../../test/utils';
+import { ToggleGroup } from './index';
+
+function renderToggleGroup(
+  props: Partial<React.ComponentProps<typeof ToggleGroup>> = {}
+) {
+  const defaultProps = {
+    value: 'a',
+    onChange: vi.fn(),
+    ...props,
+  };
+
+  return {
+    onChange: defaultProps.onChange,
+    ...render(
+      <ToggleGroup {...defaultProps}>
+        <ToggleGroup.Item value="a">Option A</ToggleGroup.Item>
+        <ToggleGroup.Item value="b">Option B</ToggleGroup.Item>
+        <ToggleGroup.Item value="c" disabled>Option C</ToggleGroup.Item>
+      </ToggleGroup>
+    ),
+  };
+}
+
+describe('ToggleGroup', () => {
+  it('renders with radiogroup role', () => {
+    renderToggleGroup();
+    expect(screen.getByRole('radiogroup')).toBeInTheDocument();
+  });
+
+  it('renders items with radio role', () => {
+    renderToggleGroup();
+    expect(screen.getAllByRole('radio')).toHaveLength(3);
+  });
+
+  it('marks selected item with aria-checked', () => {
+    renderToggleGroup({ value: 'b' });
+    const optionB = screen.getByRole('radio', { name: /option b/i });
+    expect(optionB).toHaveAttribute('aria-checked', 'true');
+
+    const optionA = screen.getByRole('radio', { name: /option a/i });
+    expect(optionA).toHaveAttribute('aria-checked', 'false');
+  });
+
+  it('calls onChange when an item is clicked', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderToggleGroup();
+
+    await user.click(screen.getByRole('radio', { name: /option b/i }));
+    expect(onChange).toHaveBeenCalledWith('b');
+  });
+
+  it('does not call onChange for disabled items', async () => {
+    const user = userEvent.setup();
+    const { onChange } = renderToggleGroup();
+
+    const disabledItem = screen.getByRole('radio', { name: /option c/i });
+    expect(disabledItem).toBeDisabled();
+
+    await user.click(disabledItem);
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('applies variant class', () => {
+    renderToggleGroup({ variant: 'pills' });
+    const group = screen.getByRole('radiogroup');
+    expect(group.className).toContain('pills');
+  });
+
+  it('applies size class', () => {
+    renderToggleGroup({ size: 'sm' });
+    const group = screen.getByRole('radiogroup');
+    expect(group.className).toContain('size-sm');
+  });
+
+  it('manages tabIndex correctly for selected item', () => {
+    renderToggleGroup({ value: 'a' });
+    const optionA = screen.getByRole('radio', { name: /option a/i });
+    const optionB = screen.getByRole('radio', { name: /option b/i });
+
+    expect(optionA).toHaveAttribute('tabindex', '0');
+    expect(optionB).toHaveAttribute('tabindex', '-1');
+  });
+
+  it('has no accessibility violations', async () => {
+    const { container } = renderToggleGroup();
+    await expectNoA11yViolations(container);
+  });
+});

package/src/components/ToggleGroup/index.tsx

@@ -39,6 +39,8 @@ interface ToggleGroupContextValue {
   onChange: (value: string) => void;
   variant: 'default' | 'pills' | 'outline';
   size: 'sm' | 'md';
+  hasFocusableSelection: boolean;
+  firstEnabledValue: string | null;
 }
 
 const ToggleGroupContext = React.createContext<ToggleGroupContextValue | null>(
@@ -77,11 +79,22 @@ function ToggleGroupRoot({
     .filter(Boolean)
     .join(' ');
 
+  const childItems = React.Children.toArray(children).filter(
+    (child): child is React.ReactElement<ToggleGroupItemProps> =>
+      React.isValidElement<ToggleGroupItemProps>(child)
+  );
+  const firstEnabledValue = childItems.find((item) => !item.props.disabled)?.props.value ?? null;
+  const hasFocusableSelection = childItems.some(
+    (item) => !item.props.disabled && item.props.value === value
+  );
+
   const contextValue: ToggleGroupContextValue = {
     value,
     onChange,
     variant,
     size,
+    hasFocusableSelection,
+    firstEnabledValue,
   };
 
   return (
@@ -103,6 +116,8 @@ function ToggleGroupItem({
 }: ToggleGroupItemProps) {
   const context = useToggleGroupContext();
   const isSelected = context.value === value;
+  const isTabbableSelected = isSelected && !disabled;
+  const isFirstFallback = !context.hasFocusableSelection && !disabled && context.firstEnabledValue === value;
 
   const classes = [
     styles.item,
@@ -163,7 +178,7 @@ function ToggleGroupItem({
 
     const target = radios[nextIndex];
     const nextValue = target.dataset.value;
-    if (nextValue) {
+    if (nextValue != null) {
       context.onChange(nextValue);
     }
     target.focus();
@@ -176,7 +191,7 @@ function ToggleGroupItem({
       data-value={value}
       role="radio"
       aria-checked={isSelected}
-      tabIndex={isSelected ? 0 : -1}
+      tabIndex={isTabbableSelected || isFirstFallback ? 0 : -1}
       disabled={disabled}
       onClick={handleClick}
       onKeyDown={handleKeyDown}