@jmruthers/pace-core 0.2.7 → 0.5.1

package/src/components/Select/__tests__/Select.accessibility.test.tsx

@@ -1,1202 +0,0 @@
-/**
- * @file Select Component Accessibility Tests
- * @package @jmruthers/pace-core
- * @module Components/Select/Select.accessibility
- * @since 0.1.0
- * 
- * Comprehensive accessibility tests for the Select component
- * covering ARIA attributes, keyboard navigation, screen reader support,
- * and WCAG 2.1 AA compliance.
- */
-
-import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
-import React from 'react';
-import { screen, waitFor, fireEvent } from '@testing-library/react';
-import { edgeCaseUtils } from '../../__tests__/EdgeCaseTesting.enhanced.test';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import '@testing-library/jest-dom';
-import { renderWithProviders } from '../../../__tests__/shared';
-import {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-} from '../Select';
-
-// Mock lucide-react icons
-vi.mock('lucide-react', () => ({
-  Search: () => <div data-testid="search-icon">🔍</div>,
-  X: () => <div data-testid="clear-icon">✕</div>,
-  ChevronDown: () => <div data-testid="chevron-down-icon">▼</div>,
-  Check: () => <div data-testid="check-icon">✓</div>,
-}));
-
-// Mock Radix UI Select to avoid jsdom compatibility issues
-vi.mock('@radix-ui/react-select', async () => {
-  const actual = await vi.importActual('@radix-ui/react-select');
-  return {
-    ...actual,
-    Root: ({ children, onValueChange, value, defaultValue, ...props }: any) => (
-      <div data-testid="select-root" data-value={value || defaultValue} {...props}>
-        {children}
-      </div>
-    ),
-    Trigger: React.forwardRef(({ children, disabled, ...props }: any, ref) => (
-      <button
-        ref={ref}
-        data-testid="select-trigger"
-        role="button"
-        aria-haspopup="listbox"
-        aria-expanded="false"
-        disabled={disabled}
-        onClick={() => {
-          // Simulate opening the dropdown
-          const event = new CustomEvent('select-open');
-          document.dispatchEvent(event);
-        }}
-        {...props}
-      >
-        {children}
-      </button>
-    )),
-    Content: ({ children, searchable, ...props }: any) => {
-      const [searchValue, setSearchValue] = React.useState('');
-      const [showNoResults, setShowNoResults] = React.useState(false);
-      
-      React.useEffect(() => {
-        if (searchValue && searchValue.length > 0) {
-          // Simulate search delay
-          const timer = setTimeout(() => {
-            setShowNoResults(true);
-          }, 100);
-          return () => clearTimeout(timer);
-        } else {
-          setShowNoResults(false);
-        }
-      }, [searchValue]);
-
-      return (
-        <div data-testid="select-content" role="listbox" data-searchable={searchable} {...props}>
-          {searchable && (
-            <div data-testid="search-container">
-              <div data-testid="search-icon">🔍</div>
-              <input
-                data-testid="select-search-input"
-                type="text"
-                placeholder="Search..."
-                aria-label="Search options"
-                value={searchValue}
-                onChange={(e) => setSearchValue(e.target.value)}
-              />
-              {searchValue && (
-                <button data-testid="select-clear-search" aria-label="Clear search" type="button">
-                  ✕
-                </button>
-              )}
-            </div>
-          )}
-          <div data-testid="select-viewport">
-            {showNoResults ? (
-              <div data-testid="select-no-results" role="status">
-                No results found
-              </div>
-            ) : (
-              children
-            )}
-          </div>
-        </div>
-      );
-    },
-    Viewport: ({ children, ...props }: any) => (
-      <div data-testid="select-viewport" {...props}>
-        {children}
-      </div>
-    ),
-    Item: ({ children, value, disabled, ...props }: any) => (
-      <div
-        data-testid="select-item"
-        role="option"
-        data-value={value}
-        aria-disabled={disabled}
-        onClick={() => {
-          if (!disabled) {
-            // Simulate value change
-            const event = new CustomEvent('select-value-change', { detail: value });
-            document.dispatchEvent(event);
-          }
-        }}
-        {...props}
-      >
-        {children}
-      </div>
-    ),
-    ItemText: ({ children, ...props }: any) => (
-      <span data-testid="select-item-text" {...props}>
-        {children}
-      </span>
-    ),
-    ItemIndicator: ({ children, ...props }: any) => (
-      <span data-testid="select-item-indicator" {...props}>
-        {children}
-      </span>
-    ),
-    Value: ({ children, ...props }: any) => (
-      <span data-testid="select-value" {...props}>
-        {children}
-      </span>
-    ),
-    Label: ({ children, ...props }: any) => (
-      <div data-testid="select-label" {...props}>
-        {children}
-      </div>
-    ),
-    Group: ({ children, ...props }: any) => (
-      <div data-testid="select-group" {...props}>
-        {children}
-      </div>
-    ),
-    Separator: ({ ...props }: any) => (
-      <div data-testid="select-separator" {...props} />
-    ),
-    Icon: ({ children, ...props }: any) => (
-      <span data-testid="select-icon" {...props}>
-        {children}
-      </span>
-    ),
-    Portal: ({ children }: any) => <>{children}</>,
-  };
-});
-
-describe('Select Component - Accessibility Tests', () => {
-  const user = userEvent.setup();
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('ARIA Attributes and Roles', () => {
-    it('provides proper ARIA attributes for select trigger', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      const trigger = screen.getByTestId('select-trigger');
-      expect(trigger).toBeInTheDocument();
-      
-      // Should have proper role and aria attributes
-      expect(trigger).toHaveAttribute('role', 'combobox');
-      expect(trigger).toHaveAttribute('aria-haspopup', 'listbox');
-      expect(trigger).toHaveAttribute('aria-expanded');
-    });
-
-    it('provides proper ARIA attributes for select content', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const content = screen.getByTestId('select-content');
-      expect(content).toBeInTheDocument();
-      
-      // Should have proper role for listbox
-      expect(content).toHaveAttribute('role', 'listbox');
-    });
-
-    it('provides proper ARIA attributes for select items', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const items = screen.getAllByTestId('select-item');
-      expect(items).toHaveLength(2);
-      
-      items.forEach(item => {
-        expect(item).toHaveAttribute('role', 'option');
-        expect(item).toHaveAttribute('data-value');
-      });
-    });
-
-    it('provides proper ARIA attributes for search input', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      expect(searchInput).toBeInTheDocument();
-      expect(searchInput).toHaveAttribute('aria-label', 'Search options');
-      expect(searchInput).toHaveAttribute('type', 'text');
-    });
-
-    it('provides proper ARIA attributes for clear button', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable >
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      // Wait a bit for state to update
-      await new Promise(resolve => setTimeout(resolve, 10));
-
-      // Wait for the select content to appear
-      await screen.findByTestId('select-content');
-
-      // Wait for the search input to appear
-      const searchInput = await screen.findByTestId('select-search-input');
-      fireEvent.change(searchInput, { target: { value: 'test' } });
-
-      // Wait for clear button to appear
-      await screen.findByTestId('select-clear-search');
-      const clearButton = screen.getByTestId('select-clear-search');
-      expect(clearButton).toBeInTheDocument();
-      expect(clearButton).toHaveAttribute('aria-label', 'Clear search');
-      expect(clearButton).toHaveAttribute('type', 'button');
-    });
-  });
-
-  describe('Keyboard Navigation', () => {
-    it('supports keyboard navigation for trigger', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      const trigger = screen.getByTestId('select-trigger');
-      
-      // Should be focusable
-      trigger.focus();
-      expect(trigger).toHaveFocus();
-      
-      // Should respond to Enter key
-      await user.keyboard('{Enter}');
-      expect(trigger).toBeInTheDocument();
-      
-      // Should respond to Space key
-      await user.keyboard('{Space}');
-      expect(trigger).toBeInTheDocument();
-    });
-
-    it('supports keyboard navigation for search input', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      // Wait a bit for state to update
-      await new Promise(resolve => setTimeout(resolve, 10));
-
-      // Wait for the select content to appear
-      await screen.findByTestId('select-content');
-
-      // Wait for the search input to appear
-      const searchInput = await screen.findByTestId('select-search-input');
-      
-      // Should be focusable
-      searchInput.focus();
-      expect(searchInput).toHaveFocus();
-      
-      // Should respond to typing
-      fireEvent.change(searchInput, { target: { value: 'test' } });
-      expect(searchInput).toHaveValue('test');
-      
-      // Should respond to Escape key
-      await user.keyboard('{Escape}');
-      expect(searchInput).toHaveValue('');
-    });
-
-    it('supports global keyboard shortcuts', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Test / key to focus search
-      await user.keyboard('/');
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      // Focus the search input manually since our mock doesn't handle keyboard shortcuts
-      searchInput.focus();
-      expect(searchInput).toHaveFocus();
-      
-      // Test Ctrl+F to focus search
-      await user.keyboard('{Control>}f{/Control}');
-      // Focus management is handled by the component in real implementation
-      expect(searchInput).toBeInTheDocument();
-    });
-
-    it('supports arrow key navigation', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-            <SelectItem value="option3">Option 3</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      const trigger = screen.getByTestId('select-trigger');
-      trigger.focus();
-      
-      // Should respond to arrow keys
-      await user.keyboard('{ArrowDown}');
-      await user.keyboard('{ArrowUp}');
-      
-      expect(trigger).toBeInTheDocument();
-    });
-  });
-
-  describe('Screen Reader Support', () => {
-    it('announces search results to screen readers', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="apple">Apple</SelectItem>
-            <SelectItem value="banana">Banana</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      // Wait a bit for state to update
-      await new Promise(resolve => setTimeout(resolve, 10));
-
-      // Wait for the select content to appear
-      await screen.findByTestId('select-content');
-
-      // Wait for the search input to appear
-      const searchInput = await screen.findByTestId('select-search-input');
-      fireEvent.change(searchInput, { target: { value: 'apple' } });
-
-      // Wait for search to complete
-      await new Promise(resolve => setTimeout(resolve, 100));
-
-      // The search input should be accessible and functional
-      expect(searchInput).toBeInTheDocument();
-      expect(searchInput).toHaveAttribute('aria-label', 'Search options');
-      expect(searchInput).toHaveValue('apple');
-    });
-
-    it('provides proper live regions for dynamic content', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      // The search input should be accessible for dynamic content
-      const searchInput = screen.getByTestId('select-search-input');
-      expect(searchInput).toBeInTheDocument();
-      expect(searchInput).toHaveAttribute('aria-label', 'Search options');
-    });
-
-    it('announces no results found', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable noResultsText="No results found">
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      // Wait a bit for state to update
-      await new Promise(resolve => setTimeout(resolve, 10));
-
-      // Wait for the select content to appear
-      await screen.findByTestId('select-content');
-
-      // Wait for the search input to appear
-      const searchInput = await screen.findByTestId('select-search-input');
-      fireEvent.change(searchInput, { target: { value: 'xyz' } });
-
-      // Wait for search to complete
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // The search input should be functional and accessible
-      expect(searchInput).toBeInTheDocument();
-      expect(searchInput).toHaveValue('xyz');
-      expect(searchInput).toHaveAttribute('aria-label', 'Search options');
-    });
-  });
-
-  describe('Focus Management', () => {
-    it('manages focus correctly when opening select', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // In a real implementation, focus would move to search input
-      expect(searchInput).toBeInTheDocument();
-      // Focus management is handled by the component in real implementation
-      // We test that the search input is accessible and functional
-    });
-
-    it('restores focus when closing select', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Focus search input
-      searchInput.focus();
-      expect(searchInput).toHaveFocus();
-      
-      // Press Escape to close
-      await user.keyboard('{Escape}');
-      
-      // Focus should be restored appropriately
-      expect(trigger).toBeInTheDocument();
-    });
-  });
-
-  describe('High Contrast Support', () => {
-    it('provides sufficient color contrast for text', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const items = screen.getAllByTestId('select-item');
-      
-      // All text elements should be visible
-      expect(trigger).toBeInTheDocument();
-      expect(items).toHaveLength(2);
-      
-      items.forEach(item => {
-        expect(item).toBeVisible();
-      });
-    });
-
-    it('provides focus indicators', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      const trigger = screen.getByTestId('select-trigger');
-      
-      // Should have focus styles
-      trigger.focus();
-      expect(trigger).toHaveFocus();
-      
-      // Should have focus ring classes
-      expect(trigger).toHaveClass('focus-visible:outline-none', 'focus-visible:ring-1', 'focus-visible:ring-ring');
-    });
-  });
-
-  describe('Voice Control Support', () => {
-    it('supports voice control commands', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Elements should be accessible to voice control
-      expect(trigger).toBeInTheDocument();
-      expect(searchInput).toBeInTheDocument();
-      
-      // Should have proper labels for voice control
-      expect(searchInput).toHaveAttribute('aria-label', 'Search options');
-    });
-
-    it('provides semantic structure for voice control', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const content = screen.getByTestId('select-content');
-      const items = screen.getAllByTestId('select-item');
-      
-      // Should have proper semantic structure
-      expect(trigger).toHaveAttribute('role', 'combobox');
-      expect(content).toHaveAttribute('role', 'listbox');
-      
-      items.forEach(item => {
-        expect(item).toHaveAttribute('role', 'option');
-      });
-    });
-  });
-
-  describe('WCAG 2.1 AA Compliance', () => {
-    it('meets WCAG 2.1 AA success criteria 1.3.1 (Info and Relationships)', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const content = screen.getByTestId('select-content');
-
-      const items = screen.getAllByTestId('select-item');
-      
-      // Information and relationships should be programmatically determinable
-      expect(trigger).toHaveAttribute('aria-haspopup', 'listbox');
-      expect(content).toHaveAttribute('role', 'listbox');
-      
-      items.forEach(item => {
-        expect(item).toHaveAttribute('role', 'option');
-        expect(item).toHaveAttribute('data-value');
-      });
-    });
-
-    it('meets WCAG 2.1 AA success criteria 2.1.1 (Keyboard)', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // All functionality should be available from a keyboard
-      expect(trigger).toBeInTheDocument();
-      expect(searchInput).toBeInTheDocument();
-      
-      // Should be focusable
-      trigger.focus();
-      expect(trigger).toHaveFocus();
-      
-      searchInput.focus();
-      expect(searchInput).toHaveFocus();
-    });
-
-    it('meets WCAG 2.1 AA success criteria 2.4.3 (Focus Order)', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Focus order should be logical and intuitive
-      trigger.focus();
-      expect(trigger).toHaveFocus();
-      
-      // Tab should move to search input
-      trigger.blur();
-      searchInput.focus();
-      expect(searchInput).toHaveFocus();
-    });
-
-    it('meets WCAG 2.1 AA success criteria 4.1.3 (Status Messages)', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Status messages should be accessible through the search input
-      expect(searchInput).toBeInTheDocument();
-      expect(searchInput).toHaveAttribute('aria-label', 'Search options');
-    });
-  });
-
-  describe('Error Prevention', () => {
-    it('prevents accidental form submission', async () => {
-      const handleSubmit = vi.fn((e: React.FormEvent) => {
-        e.preventDefault();
-      });
-
-      renderWithProviders(
-        <form onSubmit={handleSubmit}>
-          <Select>
-            <SelectTrigger>
-              <SelectValue placeholder="Select an option" />
-            </SelectTrigger>
-            <SelectContent searchable>
-              <SelectItem value="option1">Option 1</SelectItem>
-              <SelectItem value="option2">Option 2</SelectItem>
-            </SelectContent>
-          </Select>
-          <button type="submit">Submit</button>
-        </form>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      // Wait a bit for state to update
-      await new Promise(resolve => setTimeout(resolve, 10));
-
-      // Wait for the select content to appear
-      await screen.findByTestId('select-content');
-
-      // Wait for the search input to appear
-      const searchInput = await screen.findByTestId('select-search-input');
-      const submitButton = screen.getByRole('button', { name: 'Submit' });
-      
-      // Type in search input
-      fireEvent.change(searchInput, { target: { value: 'test' } });
-      
-      // Press Enter in search input should not submit form
-      // In our mock, Enter key handling is not implemented, so we just test that the input is functional
-      expect(searchInput).toHaveValue('test');
-      expect(searchInput).toBeInTheDocument();
-    });
-
-    it('provides clear error messages', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable >
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      // Wait a bit for state to update
-      await new Promise(resolve => setTimeout(resolve, 10));
-
-      // Wait for the select content to appear
-      await screen.findByTestId('select-content');
-
-      // Wait for the search input to appear
-      const searchInput = await screen.findByTestId('select-search-input');
-      fireEvent.change(searchInput, { target: { value: 'test' } });
-
-      // Wait for search to complete
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // The search input should be functional and accessible
-      expect(searchInput).toBeInTheDocument();
-      expect(searchInput).toHaveValue('test');
-      expect(searchInput).toHaveAttribute('aria-label', 'Search options');
-    });
-
-    it('provides no results message', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      // Wait a bit for state to update
-      await new Promise(resolve => setTimeout(resolve, 10));
-
-      // Wait for the select content to appear
-      await screen.findByTestId('select-content');
-
-      // Wait for the search input to appear
-      const searchInput = await screen.findByTestId('select-search-input');
-      fireEvent.change(searchInput, { target: { value: 'xyz' } });
-
-      // Wait for search to complete
-      await new Promise(resolve => setTimeout(resolve, 100));
-      
-      // The search input should be functional and accessible
-      expect(searchInput).toBeInTheDocument();
-      expect(searchInput).toHaveValue('xyz');
-      expect(searchInput).toHaveAttribute('aria-label', 'Search options');
-    });
-  });
-
-  describe('Mobile Accessibility', () => {
-    it('supports touch interactions', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const searchInput = screen.getByTestId('select-search-input');
-      
-      // Should respond to touch events
-      fireEvent.touchStart(trigger);
-      fireEvent.touchEnd(trigger);
-      
-      expect(trigger).toBeInTheDocument();
-      expect(searchInput).toBeInTheDocument();
-    });
-
-    it('provides adequate touch targets', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent searchable>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-
-      const items = screen.getAllByTestId('select-item');
-      
-      // Touch targets should be at least 44x44 pixels
-      // This is tested by ensuring elements are rendered and accessible
-      expect(trigger).toBeInTheDocument();
-      expect(items).toHaveLength(2);
-      
-      items.forEach(item => {
-        expect(item).toBeInTheDocument();
-      });
-    });
-  });
-describe('Select Error Handling', () => {
-  const user = userEvent.setup();
-  let restoreConsole: (() => void) | null = null;
-
-  beforeEach(() => {
-    restoreConsole = errorTestingUtils.suppressConsoleErrors();
-  });
-
-  afterEach(() => {
-    if (restoreConsole) {
-      restoreConsole();
-    }
-  });
-
-  it('should handle component errors gracefully', () => {
-    const ErrorComponent = () => {
-      throw new Error('Select component error');
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    expect(screen.getByText('Error: Select component error')).toBeInTheDocument();
-  });
-
-  it('should handle async errors', async () => {
-    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
-      const [error, setError] = React.useState<Error | null>(null);
-
-      React.useEffect(() => {
-        if (shouldFail) {
-          setError(new Error('Async error'));
-        }
-      }, [shouldFail]);
-
-      if (error) {
-        throw error;
-      }
-
-      return <div>Async component</div>;
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <AsyncErrorComponent shouldFail={true} />
-      </TestErrorBoundary>
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    });
-  });
-
-  it('should handle user interaction errors', async () => {
-    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
-      'Select interaction error',
-      'click'
-    );
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    await user.click(screen.getByTestId('error-button'));
-
-    await waitFor(() => {
-      expect(screen.getByTestId('error-display')).toBeInTheDocument();
-    });
-  });
-
-  it('should recover from errors when props change', async () => {
-    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
-      if (shouldError) {
-        throw new Error('Select prop error');
-      }
-      return <div>Normal content</div>;
-    };
-
-    await errorTestingUtils.testErrorRecovery(
-      TestComponent,
-      { shouldError: true },
-      { shouldError: false }
-    );
-
-    expect(screen.getByText('Normal content')).toBeInTheDocument();
-  });
-});
-describe('Select Edge Cases', () => {
-  describe('Extreme Data Values', () => {
-    it('should handle very long strings', () => {
-      const longString = edgeCaseUtils.generateExtremeData.longString(1000);
-      
-      const { container } = renderWithProviders(<Select>{longString}</Select>);
-      expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-    });
-
-    it('should handle empty and null values', () => {
-      const emptyValues = edgeCaseUtils.generateExtremeData.emptyValues();
-      
-      emptyValues.forEach(value => {
-          const { container, unmount } = renderWithProviders(<Select>{value as any}</Select>);
-        expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-        unmount();
-      });
-    });
-
-    it('should handle special characters', () => {
-      const specialChars = edgeCaseUtils.generateExtremeData.specialChars();
-      
-      const { container } = renderWithProviders(<Select>{specialChars}</Select>);
-      expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-    });
-
-    it('should handle unicode characters', () => {
-      const unicodeChars = edgeCaseUtils.generateExtremeData.unicodeChars();
-      
-      const { container } = renderWithProviders(<Select>{unicodeChars}</Select>);
-      expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-    });
-  });
-
-  describe('Extreme Numbers', () => {
-    it('should handle very large numbers', () => {
-      const largeNumbers = edgeCaseUtils.generateExtremeData.largeNumbers();
-      
-      largeNumbers.forEach(number => {
-        const { container, unmount } = renderWithProviders(<Select value={number} />);
-        expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-        unmount();
-      });
-    });
-
-    it('should handle very small numbers', () => {
-      const smallNumbers = edgeCaseUtils.generateExtremeData.smallNumbers();
-      
-      smallNumbers.forEach(number => {
-        const { container, unmount } = renderWithProviders(<Select value={number} />);
-        expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-        unmount();
-      });
-    });
-  });
-
-  describe('Rapid State Changes', () => {
-    it('should handle rapid prop changes', async () => {
-      const stateProps = [
-        { children: 'State 1' },
-        { children: 'State 2' },
-        { children: 'State 3' },
-        { children: 'State 4' },
-        { children: 'State 5' },
-      ];
-
-      await edgeCaseUtils.testRapidStateChanges(Select, stateProps);
-    });
-
-    it('should handle rapid user interactions', async () => {
-      const { container } = renderWithProviders(<Select />);
-      
-      const select = container.querySelector('[data-testid="select-root"]');
-      
-      // Select should render successfully
-      expect(select).toBeInTheDocument();
-    });
-  });
-
-  describe('Memory Management', () => {
-    it('should not leak memory with repeated renders', () => {
-      edgeCaseUtils.testMemoryLeaks(Select, { children: 'Memory test' });
-    });
-  });
-
-  describe('Boundary Conditions', () => {
-    it('should handle boundary prop values', () => {
-      const boundaryProps = [
-        { children: '' },
-        { children: 0 },
-        { children: false },
-        { children: [] },{ className: '' },
-        { 'data-testid': '' },
-      ];
-
-      edgeCaseUtils.testBoundaryConditions(Select, boundaryProps);
-    });
-  });
-
-  describe('Complex Data Structures', () => {
-    it('should handle deeply nested objects', () => {
-      const deepObject = edgeCaseUtils.generateExtremeData.deepObject(5);
-      
-      const { container } = renderWithProviders(<Select data={deepObject} />);
-      expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-    });
-
-    it('should handle large arrays', () => {
-      const largeArray = edgeCaseUtils.generateExtremeData.largeArray(1000);
-      
-      const { container } = renderWithProviders(<Select items={largeArray} />);
-      expect(container.querySelector('[data-testid="select-root"]')).toBeInTheDocument();
-    });
-  });
-});
-});