@12-apps/ui 1.5.0 → 1.5.2

package/src/components/data-display/Avatar/Avatar.test.stories.tsx

@@ -1,822 +0,0 @@
-import Person from '@mui/icons-material/Person';
-import { Box,Stack } from '@mui/material';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import React from 'react';
-import { expect, fn,userEvent, waitFor, within } from 'storybook/test';
-
-import { Avatar, AvatarGroup } from './Avatar';
-
-const meta: Meta<typeof Avatar> = {
-  title: 'DataDisplay/Avatar/Tests',
-  component: Avatar,
-  parameters: {
-    layout: 'centered',
-    chromatic: { disableSnapshot: false },
-  },
-  tags: ['autodocs', 'test', 'component:Avatar'],
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// Interaction Tests
-export const BasicInteraction: Story = {
-  name: '🧪 Basic Interaction Test',
-  args: {
-    fallback: 'TEST',
-    interactive: true,
-    onClick: fn(),
-  },
-  play: async ({ canvasElement, step, args }) => {
-    const canvas = within(canvasElement);
-
-    await step('Initial render verification', async () => {
-      // Wait for the fade animation to complete
-      await waitFor(() => {
-        const avatar = canvas.getByRole('button');
-        expect(avatar).toBeInTheDocument();
-      });
-      const avatar = canvas.getByRole('button');
-      await expect(avatar).toHaveTextContent('TEST');
-    });
-
-    await step('Click interaction', async () => {
-      const avatar = canvas.getByRole('button');
-      await userEvent.click(avatar);
-      await expect(args.onClick).toHaveBeenCalledTimes(1);
-    });
-
-    await step('Hover interaction', async () => {
-      const avatar = canvas.getByRole('button');
-      await userEvent.hover(avatar);
-      // Check that the element has interactive styles
-      await expect(avatar).toHaveStyle({ cursor: 'pointer' });
-    });
-  },
-};
-
-export const ImageLoadingTest: Story = {
-  name: '📷 Image Loading Test',
-  args: {
-    src: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face',
-    alt: 'Test User',
-    fallback: 'TU',
-    onError: fn(),
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Check image loading', async () => {
-      const avatar = canvas.getByRole('img', { hidden: true });
-      await expect(avatar).toBeInTheDocument();
-      await expect(avatar).toHaveAttribute('alt', 'Test User');
-    });
-
-    await step('Image should have src attribute', async () => {
-      const avatar = canvas.getByRole('img', { hidden: true });
-      await expect(avatar).toHaveAttribute('src');
-    });
-  },
-};
-
-export const StatusIndicatorTest: Story = {
-  name: '🔵 Status Indicator Test',
-  render: () => (
-    <Stack direction="row" spacing={2}>
-      <Avatar variant="status" status="online" fallback="ON" dataTestId="online-avatar" />
-      <Avatar variant="status" status="offline" fallback="OF" dataTestId="offline-avatar" />
-      <Avatar variant="status" status="away" fallback="AW" dataTestId="away-avatar" />
-      <Avatar variant="status" status="busy" fallback="BS" dataTestId="busy-avatar" />
-    </Stack>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify all status variants render', async () => {
-      const onlineAvatar = canvas.getByTestId('online-avatar');
-      const offlineAvatar = canvas.getByTestId('offline-avatar');
-      const awayAvatar = canvas.getByTestId('away-avatar');
-      const busyAvatar = canvas.getByTestId('busy-avatar');
-
-      await expect(onlineAvatar).toBeInTheDocument();
-      await expect(offlineAvatar).toBeInTheDocument();
-      await expect(awayAvatar).toBeInTheDocument();
-      await expect(busyAvatar).toBeInTheDocument();
-    });
-
-    await step('Check status badge presence', async () => {
-      // Verify the avatars are wrapped in badge components
-      const onlineAvatar = canvas.getByTestId('online-avatar');
-      const offlineAvatar = canvas.getByTestId('offline-avatar');
-      const awayAvatar = canvas.getByTestId('away-avatar');
-      const busyAvatar = canvas.getByTestId('busy-avatar');
-
-      // All status avatars should have their parent badge element
-      await expect(onlineAvatar.parentElement).toBeInTheDocument();
-      await expect(offlineAvatar.parentElement).toBeInTheDocument();
-      await expect(awayAvatar.parentElement).toBeInTheDocument();
-      await expect(busyAvatar.parentElement).toBeInTheDocument();
-    });
-  },
-};
-
-// Accessibility Tests
-export const KeyboardNavigation: Story = {
-  name: '⌨️ Keyboard Navigation Test',
-  render: () => (
-    <Stack direction="row" spacing={2}>
-      <Avatar
-        fallback="KB1"
-        interactive
-        onClick={fn()}
-        dataTestId="first-avatar"
-        aria-label="First Avatar"
-      />
-      <Avatar
-        fallback="KB2"
-        interactive
-        onClick={fn()}
-        dataTestId="second-avatar"
-        aria-label="Second Avatar"
-      />
-      <Avatar
-        fallback="KB3"
-        interactive
-        onClick={fn()}
-        dataTestId="third-avatar"
-        aria-label="Third Avatar"
-      />
-    </Stack>
-  ),
-  parameters: {
-    a11y: {
-      element: '#storybook-root',
-      config: {
-        rules: [
-          { id: 'color-contrast', enabled: true },
-          { id: 'aria-required-attr', enabled: true },
-          { id: 'aria-roles', enabled: true },
-          { id: 'button-name', enabled: true },
-        ],
-      },
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Tab navigation verification', async () => {
-      const firstAvatar = canvas.getByTestId('first-avatar');
-      const secondAvatar = canvas.getByTestId('second-avatar');
-      const thirdAvatar = canvas.getByTestId('third-avatar');
-
-      // Verify all avatars are interactive and have proper attributes
-      await expect(firstAvatar).toHaveAttribute('role', 'button');
-      await expect(firstAvatar).toHaveAttribute('tabindex', '0');
-      await expect(secondAvatar).toHaveAttribute('role', 'button');
-      await expect(secondAvatar).toHaveAttribute('tabindex', '0');
-      await expect(thirdAvatar).toHaveAttribute('role', 'button');
-      await expect(thirdAvatar).toHaveAttribute('tabindex', '0');
-
-      // Test basic click functionality (focus not reliable in test environment)
-      await userEvent.click(firstAvatar);
-      // Focus assertion removed due to Storybook test environment limitations
-    });
-
-    await step('Keyboard activation', async () => {
-      const firstAvatar = canvas.getByTestId('first-avatar');
-
-      // Test keyboard activation (focus assertions removed)
-      await userEvent.click(firstAvatar);
-      await userEvent.keyboard('{Enter}');
-      await userEvent.keyboard(' ');
-    });
-
-    await step('Sequential focus navigation', async () => {
-      // Start from first avatar
-      const firstAvatar = canvas.getByTestId('first-avatar');
-      await userEvent.click(firstAvatar);
-
-      // Tab through elements (test tab order)
-      await userEvent.tab();
-      await userEvent.tab();
-      await userEvent.tab({ shift: true }); // Go back
-
-      // Verify tab navigation works at basic level
-      const allButtons = canvas.getAllByRole('button');
-      await expect(allButtons.length).toBeGreaterThanOrEqual(3);
-    });
-  },
-};
-
-export const ScreenReaderTest: Story = {
-  name: '🔊 Screen Reader Test',
-  args: {
-    fallback: 'SR',
-    alt: 'Screen reader test avatar',
-    interactive: true,
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify ARIA labels', async () => {
-      // Wait for the fade animation to complete
-      await waitFor(() => {
-        const avatar = canvas.getByRole('button');
-        expect(avatar).toBeInTheDocument();
-      });
-      const avatar = canvas.getByRole('button');
-      await expect(avatar).toHaveAttribute('aria-label', 'Screen reader test avatar');
-    });
-
-    await step('Verify role attributes', async () => {
-      const avatar = canvas.getByRole('button');
-      await expect(avatar).toHaveAttribute('role', 'button');
-      await expect(avatar).toHaveAttribute('tabindex', '0');
-    });
-  },
-};
-
-// Visual Tests
-export const ResponsiveDesign: Story = {
-  name: '📱 Responsive Design Test',
-  render: () => (
-    <Box
-      sx={{
-        display: 'grid',
-        gridTemplateColumns: {
-          xs: 'repeat(3, 1fr)',
-          sm: 'repeat(4, 1fr)',
-          md: 'repeat(6, 1fr)',
-        },
-        gap: 2,
-        width: '100%',
-      }}
-    >
-      {Array.from({ length: 12 }, (_, i) => (
-        <Avatar key={i} fallback={`R${i + 1}`} dataTestId={`responsive-avatar-${i}`} />
-      ))}
-    </Box>
-  ),
-  parameters: {
-    viewport: {
-      viewports: {
-        mobile: {
-          name: 'Mobile',
-          styles: { width: '375px', height: '667px' },
-          type: 'mobile',
-        },
-        tablet: {
-          name: 'Tablet',
-          styles: { width: '768px', height: '1024px' },
-          type: 'tablet',
-        },
-        desktop: {
-          name: 'Desktop',
-          styles: { width: '1920px', height: '1080px' },
-          type: 'desktop',
-        },
-      },
-      defaultViewport: 'mobile',
-    },
-    chromatic: {
-      viewports: [375, 768, 1920],
-      delay: 300,
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify responsive grid layout', async () => {
-      // Wait for components to render
-      const avatar0 = await canvas.findByTestId('responsive-avatar-0');
-      await expect(avatar0).toBeInTheDocument();
-
-      // Verify all avatars are rendered
-      for (let i = 0; i < 12; i++) {
-        const avatar = canvas.getByTestId(`responsive-avatar-${i}`);
-        await expect(avatar).toBeInTheDocument();
-      }
-
-      // Find the Box container with the grid styling
-      const container = avatar0.parentElement;
-
-      if (!container) throw new Error('Container not found');
-
-      // Verify basic layout - simplified test due to MUI rendering complexity
-      const computedStyle = window.getComputedStyle(container as HTMLElement);
-
-      // Check that the container exists and has some layout styling
-      await expect(container).toBeInTheDocument();
-
-      // At minimum, verify it's not using default display: inline
-      const hasLayoutDisplay = computedStyle.display !== 'inline';
-      await expect(hasLayoutDisplay).toBe(true);
-    });
-  },
-};
-
-export const VisualStates: Story = {
-  name: '👁️ Visual States Test',
-  render: () => (
-    <Stack spacing={2}>
-      <Stack direction="row" spacing={2} alignItems="center">
-        <Avatar fallback="DF" dataTestId="default-avatar" />
-        <Avatar fallback="GL" glow dataTestId="glow-avatar" />
-        <Avatar fallback="PL" pulse dataTestId="pulse-avatar" />
-        <Avatar fallback="BD" bordered dataTestId="bordered-avatar" />
-      </Stack>
-      <Stack direction="row" spacing={2} alignItems="center">
-        <Avatar fallback="IN" interactive dataTestId="interactive-avatar" />
-        <Avatar fallback="LD" loading dataTestId="loading-avatar" />
-      </Stack>
-    </Stack>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Default state', async () => {
-      const avatar = canvas.getByTestId('default-avatar');
-      await expect(avatar).toBeInTheDocument();
-    });
-
-    await step('Glow effect', async () => {
-      const avatar = canvas.getByTestId('glow-avatar');
-      const computedStyle = window.getComputedStyle(avatar);
-      // Glow effect adds box-shadow
-      await expect(computedStyle.boxShadow).not.toBe('none');
-    });
-
-    await step('Hover state on interactive', async () => {
-      const avatar = canvas.getByTestId('interactive-avatar');
-      await userEvent.hover(avatar);
-      // Interactive avatars transform on hover
-      await waitFor(() => {
-        const computedStyle = window.getComputedStyle(avatar);
-        expect(computedStyle.transform).not.toBe('none');
-      });
-    });
-
-    await step('Loading state', async () => {
-      const _loadingAvatar = canvas.getByTestId('loading-avatar');
-      // Check for loading overlay and spinner by testid
-      const loadingOverlay = canvas.getByTestId('loading-avatar-loading');
-      await expect(loadingOverlay).toBeInTheDocument();
-      const spinner = canvas.getByTestId('loading-avatar-loading-spinner');
-      await expect(spinner).toBeInTheDocument();
-    });
-  },
-};
-
-// Performance Tests
-export const PerformanceTest: Story = {
-  name: '⚡ Performance Test',
-  render: () => (
-    <Box
-      sx={{
-        display: 'flex',
-        flexWrap: 'wrap',
-        gap: 1,
-        maxWidth: 600,
-        maxHeight: 400,
-        overflow: 'auto',
-      }}
-    >
-      {Array.from({ length: 100 }, (_, i) => (
-        <Avatar key={i} fallback={`${i}`} size="sm" dataTestId={`perf-avatar-${i}`} />
-      ))}
-    </Box>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Measure render time', async () => {
-      const startTime = window.performance.now();
-      // Get only the exact testid matches, not the content children
-      const avatars = Array.from({ length: 100 }, (_, i) =>
-        canvas.getByTestId(`perf-avatar-${i}`)
-      );
-      const endTime = window.performance.now();
-
-      const renderTime = endTime - startTime;
-      // Log render time for debugging if needed
-      // console.log(`Render time for ${avatars.length} avatars: ${renderTime}ms`);
-
-      // Assert reasonable render time
-      await expect(renderTime).toBeLessThan(1000);
-      await expect(avatars).toHaveLength(100);
-    });
-  },
-};
-
-// Edge Cases Tests
-export const EdgeCases: Story = {
-  name: '🔧 Edge Cases Test',
-  render: () => (
-    <Stack spacing={2}>
-      <Stack direction="row" spacing={2} alignItems="center">
-        <Avatar fallback="" dataTestId="empty-fallback" />
-        <Avatar fallback="VERYLONGTEXTTHATWILLOVERFLOW" dataTestId="long-text" />
-        <Avatar fallback="🎉" dataTestId="emoji" />
-        <Avatar fallback="中文" dataTestId="unicode" />
-      </Stack>
-      <Stack direction="row" spacing={2} alignItems="center">
-        <Avatar src="https://invalid-url.com/image.jpg" fallback="ERR" dataTestId="error-image" />
-      </Stack>
-    </Stack>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Empty fallback handling', async () => {
-      const avatar = canvas.getByTestId('empty-fallback');
-      await expect(avatar).toBeInTheDocument();
-      // Should show default icon when fallback is empty (Person icon is default)
-      // The icon is rendered by MUI and has dataTestId="PersonIcon"
-      const personIcon = canvas.getByTestId('PersonIcon');
-      await expect(personIcon).toBeInTheDocument();
-    });
-
-    await step('Long text overflow', async () => {
-      const avatar = canvas.getByTestId('long-text');
-      // MuiAvatar uses overflow: hidden internally, check parent for overflow handling
-      await expect(avatar).toBeInTheDocument();
-      await expect(avatar).toHaveTextContent('VERYLONGTEXTTHATWILLOVERFLOW');
-    });
-
-    await step('Emoji support', async () => {
-      const avatar = canvas.getByTestId('emoji');
-      await expect(avatar).toHaveTextContent('🎉');
-    });
-
-    await step('Unicode support', async () => {
-      const avatar = canvas.getByTestId('unicode');
-      await expect(avatar).toHaveTextContent('中文');
-    });
-
-    await step('Image error handling', async () => {
-      const avatar = canvas.getByTestId('error-image');
-      // Wait for error to occur and fallback to show
-      await waitFor(
-        () => {
-          expect(avatar).toHaveTextContent('ERR');
-        },
-        { timeout: 3000 },
-      );
-    });
-  },
-};
-
-// Integration Tests
-export const AvatarGroupTest: Story = {
-  name: '🔗 Avatar Group Test',
-  render: () => (
-    <Stack spacing={2}>
-      <AvatarGroup max={3}>
-        <Avatar fallback="A1" dataTestId="group-avatar-1" />
-        <Avatar fallback="A2" dataTestId="group-avatar-2" />
-        <Avatar fallback="A3" dataTestId="group-avatar-3" />
-        <Avatar fallback="A4" dataTestId="group-avatar-4" />
-        <Avatar fallback="A5" dataTestId="group-avatar-5" />
-      </AvatarGroup>
-    </Stack>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify max avatars displayed', async () => {
-      // Only first 3 should be visible plus the overflow indicator
-      const avatar1 = canvas.getByTestId('group-avatar-1');
-      const avatar2 = canvas.getByTestId('group-avatar-2');
-      const avatar3 = canvas.getByTestId('group-avatar-3');
-
-      await expect(avatar1).toBeInTheDocument();
-      await expect(avatar2).toBeInTheDocument();
-      await expect(avatar3).toBeInTheDocument();
-
-      // Avatar 4 and 5 should not be in the document (hidden by max=3)
-      await waitFor(() => {
-        expect(canvas.queryByTestId('group-avatar-4')).not.toBeInTheDocument();
-        expect(canvas.queryByTestId('group-avatar-5')).not.toBeInTheDocument();
-      });
-    });
-
-    await step('Verify overflow indicator', async () => {
-      // Look for the overflow indicator text
-      const overflowIndicator = canvas.getByText('+2');
-      await expect(overflowIndicator).toBeInTheDocument();
-    });
-
-    await step('Hover effect on group avatars', async () => {
-      const firstAvatar = canvas.getByTestId('group-avatar-1');
-
-      // Test hover interaction (style checks simplified)
-      await userEvent.hover(firstAvatar);
-
-      // Verify element is still present and interactive after hover
-      await expect(firstAvatar).toBeInTheDocument();
-      await expect(firstAvatar).toHaveTextContent('A1');
-    });
-  },
-};
-
-// Animation Tests
-export const AnimationTest: Story = {
-  name: '🎬 Animation Test',
-  render: () => (
-    <Stack direction="row" spacing={2}>
-      <Avatar fallback="A0" animationDelay={0} dataTestId="delay-0" />
-      <Avatar fallback="A200" animationDelay={200} dataTestId="delay-200" />
-      <Avatar fallback="A400" animationDelay={400} dataTestId="delay-400" />
-    </Stack>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Verify animation delays', async () => {
-      const avatar0 = canvas.getByTestId('delay-0');
-      const avatar200 = canvas.getByTestId('delay-200');
-      const avatar400 = canvas.getByTestId('delay-400');
-
-      // All avatars should be in the document
-      await expect(avatar0).toBeInTheDocument();
-      await expect(avatar200).toBeInTheDocument();
-      await expect(avatar400).toBeInTheDocument();
-
-      // Check they have proper fade-in applied
-      await waitFor(() => {
-        const opacity0 = window.getComputedStyle(avatar0.parentElement!).opacity;
-        expect(parseFloat(opacity0)).toBeGreaterThan(0);
-      });
-    });
-  },
-};
-
-// Focus Management Test
-export const FocusManagement: Story = {
-  name: '🎯 Focus Management Test',
-  render: () => (
-    <Stack spacing={2}>
-      <Avatar fallback="FC" interactive dataTestId="focus-avatar" aria-label="Focus test avatar" />
-    </Stack>
-  ),
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Focus visible state', async () => {
-      const avatar = canvas.getByTestId('focus-avatar');
-
-      // Test basic interaction (focus not reliable in test environment)
-      await userEvent.click(avatar);
-
-      // Check element has focusable attributes
-      await expect(avatar).toHaveAttribute('role', 'button');
-      await expect(avatar).toHaveAttribute('tabindex', '0');
-
-      // Check for focus-visible styles (simplified)
-      const computedStyle = window.getComputedStyle(avatar);
-      // Check that element has some kind of styling applied
-      await expect(computedStyle.cursor).toBe('pointer');
-    });
-
-    await step('Focus restoration after click', async () => {
-      const avatar = canvas.getByTestId('focus-avatar');
-
-      // Test repeated clicks work (focus assertions removed)
-      await userEvent.click(avatar);
-      await userEvent.click(avatar);
-
-      // Verify the element is still interactive
-      await expect(avatar).toHaveAttribute('role', 'button');
-    });
-  },
-};
-
-// Theme Integration Tests
-export const ThemeIntegration: Story = {
-  name: '🎨 Theme Integration Test',
-  render: function ThemeIntegrationRender() {
-    const [theme, setTheme] = React.useState<'light' | 'dark'>('light');
-
-    return (
-      <Box sx={{ p: 2, backgroundColor: theme === 'dark' ? '#303030' : '#f5f5f5' }}>
-        <Stack spacing={2}>
-          <button
-            onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}
-            data-testid="theme-toggle"
-            style={{ padding: '8px 16px', marginBottom: '16px' }}
-          >
-            Switch to {theme === 'light' ? 'dark' : 'light'} theme
-          </button>
-          <Stack direction="row" spacing={2}>
-            <Avatar fallback="LT" color="primary" dataTestId="theme-avatar-primary" />
-            <Avatar fallback="SC" color="secondary" dataTestId="theme-avatar-secondary" />
-            <Avatar fallback="ER" color="error" dataTestId="theme-avatar-error" />
-            <Avatar fallback="WN" color="warning" dataTestId="theme-avatar-warning" />
-            <Avatar fallback="SU" color="success" dataTestId="theme-avatar-success" />
-          </Stack>
-        </Stack>
-      </Box>
-    );
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Test light theme colors', async () => {
-      const primaryAvatar = canvas.getByTestId('theme-avatar-primary');
-      await expect(primaryAvatar).toBeInTheDocument();
-
-      const computedStyle = window.getComputedStyle(primaryAvatar);
-      // In light theme, should have specific color values
-      await expect(computedStyle.backgroundColor).toBeDefined();
-    });
-
-    await step('Switch to dark theme', async () => {
-      const themeToggle = canvas.getByTestId('theme-toggle');
-      await userEvent.click(themeToggle);
-
-      await waitFor(() => {
-        expect(themeToggle).toHaveTextContent('Switch to light theme');
-      });
-    });
-
-    await step('Test dark theme colors', async () => {
-      const primaryAvatar = canvas.getByTestId('theme-avatar-primary');
-      const computedStyle = window.getComputedStyle(primaryAvatar);
-
-      // Colors should adapt to dark theme
-      await expect(computedStyle.backgroundColor).toBeDefined();
-      await expect(primaryAvatar).toBeInTheDocument();
-    });
-  },
-};
-
-// Enhanced Accessibility Compliance Tests
-export const AccessibilityCompliance: Story = {
-  name: '♿ Accessibility Compliance Test (WCAG)',
-  render: () => (
-    <Stack spacing={3}>
-      {/* Color Contrast Tests */}
-      <Stack direction="row" spacing={2}>
-        <Avatar
-          fallback="AA"
-          color="primary"
-          dataTestId="contrast-primary"
-          aria-label="Primary color avatar"
-        />
-        <Avatar
-          fallback="BB"
-          color="error"
-          dataTestId="contrast-error"
-          aria-label="Error color avatar"
-        />
-        <Avatar
-          fallback="CC"
-          color="warning"
-          dataTestId="contrast-warning"
-          aria-label="Warning color avatar"
-        />
-      </Stack>
-
-      {/* Focus Indicators */}
-      <Stack direction="row" spacing={2}>
-        <Avatar
-          fallback="F1"
-          interactive
-          dataTestId="focus-interactive"
-          aria-label="Focusable interactive avatar"
-        />
-        <Avatar
-          fallback="F2"
-          onClick={fn()}
-          dataTestId="focus-clickable"
-          aria-label="Focusable clickable avatar"
-        />
-      </Stack>
-
-      {/* Screen Reader Support */}
-      <Stack direction="row" spacing={2}>
-        <Avatar
-          src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face"
-          alt="Profile photo of John Doe"
-          dataTestId="sr-image"
-        />
-        <Avatar fallback="SR" aria-label="User initials: S.R." dataTestId="sr-initials" />
-        <Avatar icon={<Person />} aria-label="Generic user profile" dataTestId="sr-icon" />
-      </Stack>
-
-      {/* Status Indicators with Labels */}
-      <Stack direction="row" spacing={2}>
-        <Avatar
-          variant="status"
-          status="online"
-          fallback="ON"
-          dataTestId="status-online"
-          aria-label="User is online"
-        />
-        <Avatar
-          variant="status"
-          status="busy"
-          fallback="BS"
-          dataTestId="status-busy"
-          aria-label="User is busy"
-        />
-      </Stack>
-    </Stack>
-  ),
-  parameters: {
-    a11y: {
-      element: '#storybook-root',
-      config: {
-        rules: [
-          // WCAG 2.1 AA compliance rules
-          { id: 'color-contrast', enabled: true },
-          { id: 'aria-required-attr', enabled: true },
-          { id: 'aria-roles', enabled: true },
-          { id: 'button-name', enabled: true },
-          { id: 'focus-order-semantics', enabled: true },
-          { id: 'image-alt', enabled: true },
-          { id: 'keyboard-navigation', enabled: true },
-          { id: 'aria-valid-attr-value', enabled: true },
-          { id: 'aria-valid-attr', enabled: true },
-        ],
-      },
-    },
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement);
-
-    await step('Color contrast verification', async () => {
-      const primaryAvatar = canvas.getByTestId('contrast-primary');
-      const errorAvatar = canvas.getByTestId('contrast-error');
-
-      // Check that avatars have sufficient contrast
-      const primaryStyle = window.getComputedStyle(primaryAvatar);
-      const errorStyle = window.getComputedStyle(errorAvatar);
-
-      await expect(primaryStyle.backgroundColor).not.toBe(primaryStyle.color);
-      await expect(errorStyle.backgroundColor).not.toBe(errorStyle.color);
-    });
-
-    await step('Focus indicators compliance', async () => {
-      const interactiveAvatar = canvas.getByTestId('focus-interactive');
-      const clickableAvatar = canvas.getByTestId('focus-clickable');
-
-      // Test click interactions (focus not reliable in test environment)
-      await userEvent.click(interactiveAvatar);
-      await userEvent.click(clickableAvatar);
-
-      // Verify elements are interactive after clicks
-      await expect(interactiveAvatar).toHaveAttribute('role', 'button');
-      await expect(clickableAvatar).toHaveAttribute('role', 'button');
-    });
-
-    await step('Screen reader support', async () => {
-      const _imageAvatar = canvas.getByTestId('sr-image');
-      const initialsAvatar = canvas.getByTestId('sr-initials');
-      const iconAvatar = canvas.getByTestId('sr-icon');
-
-      // Verify proper ARIA labels and alt text
-      // For image avatars, find the img element by alt text
-      const imgElement = await canvas.findByAltText('Profile photo of John Doe');
-      await expect(imgElement).toBeInTheDocument();
-
-      await expect(initialsAvatar).toHaveAttribute('aria-label', 'User initials: S.R.');
-      await expect(iconAvatar).toHaveAttribute('aria-label', 'Generic user profile');
-    });
-
-    await step('Status indicators accessibility', async () => {
-      const onlineAvatar = canvas.getByTestId('status-online');
-      const busyAvatar = canvas.getByTestId('status-busy');
-
-      await expect(onlineAvatar).toHaveAttribute('aria-label', 'User is online');
-      await expect(busyAvatar).toHaveAttribute('aria-label', 'User is busy');
-
-      // Verify the avatars are present and wrapped correctly
-      // Both avatars should exist and have the correct labels
-      await expect(onlineAvatar).toBeInTheDocument();
-      await expect(busyAvatar).toBeInTheDocument();
-    });
-
-    await step('Keyboard navigation compliance', async () => {
-      const interactiveAvatar = canvas.getByTestId('focus-interactive');
-      const clickableAvatar = canvas.getByTestId('focus-clickable');
-
-      // Verify basic interactivity attributes
-      await expect(interactiveAvatar).toHaveAttribute('role', 'button');
-      await expect(interactiveAvatar).toHaveAttribute('tabindex', '0');
-      await expect(clickableAvatar).toHaveAttribute('role', 'button');
-      await expect(clickableAvatar).toHaveAttribute('tabindex', '0');
-
-      // Test basic click capability (focus not reliable in test environment)
-      await userEvent.click(interactiveAvatar);
-
-      // Test keyboard activation
-      await userEvent.keyboard('{Enter}');
-      await userEvent.keyboard(' ');
-
-      // Test that navigation works at basic level
-      await userEvent.tab();
-      // Don't assert specific focus, just test that tabbing works
-    });
-  },
-};