@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,629 +0,0 @@
-/**
- * @file DataTable Accessibility Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Accessibility
- * @since 0.3.0
- */
-
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import '@testing-library/jest-dom';
-import { renderWithProviders } from '../../../../__tests__/shared';
-
-// Mock the complex DataTable component to avoid hanging
-vi.mock('../../DataTable', () => ({
-  DataTable: ({ 
-    columns, 
-    data, 
-    title, 
-    description, 
-    className,
-    searchable = true,
-    paginated = false,
-    exportable = false,
-    enableEditing = false,
-    enableDeletion = false,
-    enableColumnVisibility = true,
-    enableGrouping = false,
-    actions = [],
-    toolbarButtons = [],
-    isLoading = false,
-    variant = 'default',
-    sortable = false
-  }: any) => {
-    if (isLoading) {
-      return (
-        <div data-testid="loading-spinner" role="status" aria-live="polite">
-          Loading...
-        </div>
-      );
-    }
-
-    return (
-      <div className={className} data-testid="data-table" data-variant={variant}>
-        {/* Header */}
-        {title && <h2 data-testid="table-title">{title}</h2>}
-        {description && <p data-testid="table-description">{description}</p>}
-        
-        {/* Toolbar */}
-        <div data-testid="table-toolbar" role="toolbar" aria-label="Table controls">
-          {searchable && (
-            <input 
-              data-testid="search-input" 
-              placeholder="Search..." 
-              aria-label="Search table data"
-              role="searchbox"
-            />
-          )}
-          {enableColumnVisibility && (
-            <button 
-              data-testid="columns-toggle"
-              aria-label="Toggle column visibility"
-              aria-expanded="false"
-              tabIndex={0}
-            >
-              Columns
-            </button>
-          )}
-          {enableGrouping && (
-            <button 
-              data-testid="group-toggle"
-              aria-label="Toggle grouping"
-              aria-expanded="false"
-              tabIndex={0}
-            >
-              Group
-            </button>
-          )}
-          {exportable && (
-            <button 
-              data-testid="export-button"
-              aria-label="Export data"
-              tabIndex={0}
-            >
-              Export
-            </button>
-          )}
-          {toolbarButtons.map((btn: any, index: number) => (
-            <button 
-              key={index} 
-              data-testid={btn.testId || `toolbar-btn-${index}`}
-              aria-label={btn.ariaLabel || btn.label}
-              tabIndex={0}
-            >
-              {btn.label}
-            </button>
-          ))}
-        </div>
-
-        {/* Table */}
-        <table role="table" data-testid="table" aria-label={title || "Data table"}>
-        <thead>
-          <tr>
-              {columns.map((col: any) => (
-                <th 
-                  key={col.key || col.id} 
-                  data-testid={`header-${col.key || col.id}`}
-                  scope="col"
-                  aria-sort="none"
-                >
-                  {sortable && col.sortable ? (
-                    <button
-                      aria-label={`Sort by ${col.label || col.header}`}
-                      tabIndex={0}
-                    >
-                      {col.label || col.header}
-                    </button>
-                  ) : (
-                    col.label || col.header
-                  )}
-                </th>
-              ))}
-              {(enableEditing || enableDeletion || actions.length > 0) && (
-                <th data-testid="actions-header" scope="col">Actions</th>
-              )}
-            </tr>
-          </thead>
-          <tbody>
-            {data.length === 0 ? (
-              <tr>
-                <td 
-                  colSpan={columns.length + (enableEditing || enableDeletion || actions.length > 0 ? 1 : 0)}
-                  aria-live="polite"
-                >
-                  No data available
-                </td>
-              </tr>
-            ) : (
-              data.map((row: any, index: number) => (
-                <tr key={index} data-testid={`row-${index}`}>
-                  {columns.map((col: any) => (
-                    <td key={col.key || col.id} data-testid={`cell-${col.key || col.id}-${index}`}>
-                      {row[col.key || col.accessorKey]}
-                    </td>
-                  ))}
-                  {(enableEditing || enableDeletion || actions.length > 0) && (
-                    <td data-testid={`actions-${index}`}>
-                      {enableEditing && (
-                        <button 
-                          data-testid={`edit-${index}`}
-                          aria-label={`Edit row ${index + 1}`}
-                          tabIndex={0}
-                        >
-                          Edit
-                        </button>
-                      )}
-                      {enableDeletion && (
-                        <button 
-                          data-testid={`delete-${index}`}
-                          aria-label={`Delete row ${index + 1}`}
-                          tabIndex={0}
-                        >
-                          Delete
-                        </button>
-                      )}
-                      {actions.map((action: any, actionIndex: number) => (
-                        <button 
-                          key={actionIndex} 
-                          data-testid={`${action.testId}-${index}`}
-                          aria-label={action.ariaLabel || `${action.label} row ${index + 1}`}
-                          tabIndex={0}
-                        >
-                          {action.label}
-                        </button>
-                      ))}
-                    </td>
-                  )}
-                </tr>
-              ))
-            )}
-        </tbody>
-      </table>
-
-        {/* Pagination */}
-        {paginated && data.length > 0 && (
-          <nav data-testid="pagination" role="navigation" aria-label="Table pagination">
-            <button 
-              data-testid="prev-page"
-              aria-label="Go to previous page"
-              disabled={false}
-              tabIndex={0}
-            >
-              Previous
-            </button>
-            <span data-testid="page-info" aria-live="polite">Page 1</span>
-            <button 
-              data-testid="next-page"
-              aria-label="Go to next page"
-              disabled={false}
-              tabIndex={0}
-            >
-              Next
-            </button>
-          </nav>
-        )}
-    </div>
-    );
-  }
-}));
-
-// Import the mocked DataTable
-import { DataTable } from '../../DataTable';
-
-// Mock test utilities
-const createTestData = (count: number) => {
-  return Array.from({ length: count }, (_, i) => ({
-    id: i + 1,
-    name: `User ${i + 1}`,
-    email: `user${i + 1}@example.com`,
-    role: i % 2 === 0 ? 'admin' : 'user'
-  }));
-};
-
-const createTestColumns = () => [
-  { key: 'name', label: 'Name', sortable: true },
-  { key: 'email', label: 'Email', sortable: true },
-  { key: 'role', label: 'Role', sortable: false }
-];
-
-const createTestActions = () => [];
-
-describe('DataTable Accessibility Tests', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Table Structure and Semantics', () => {
-    it('has proper table role and structure', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-      
-      renderWithProviders(<DataTable columns={columns} data={data} />);
-      
-      const table = screen.getByRole('table');
-      expect(table).toBeInTheDocument();
-      
-      // Should have proper table structure
-      expect(table.querySelector('thead')).toBeInTheDocument();
-      expect(table.querySelector('tbody')).toBeInTheDocument();
-    });
-
-    it('has accessible column headers with proper scope', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-      
-      renderWithProviders(<DataTable columns={columns} data={data} />);
-      
-      const headers = screen.getAllByRole('columnheader');
-      expect(headers).toHaveLength(columns.length);
-      
-      headers.forEach(header => {
-        expect(header).toHaveAttribute('scope', 'col');
-      });
-    });
-
-    it('has proper table caption when title is provided', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-      
-      renderWithProviders(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          title="User Data Table"
-        />
-      );
-      
-      const table = screen.getByRole('table');
-      expect(table).toHaveAttribute('aria-label', 'User Data Table');
-    });
-
-    it('has accessible row structure', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-      
-      renderWithProviders(<DataTable columns={columns} data={data} />);
-      
-      const rows = screen.getAllByRole('row');
-      expect(rows.length).toBeGreaterThan(1); // Header row + data rows
-      
-      // Each row should be properly structured
-      rows.forEach(row => {
-        expect(row).toBeInTheDocument();
-      });
-    });
-  });
-
-  describe('Loading State Accessibility', () => {
-    it('announces loading state properly', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-      
-      renderWithProviders(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          isLoading={true}
-        />
-      );
-      
-      const loadingSpinner = screen.getByTestId('loading-spinner');
-      expect(loadingSpinner).toHaveAttribute('role', 'status');
-      expect(loadingSpinner).toHaveAttribute('aria-live', 'polite');
-    });
-
-    it('provides loading feedback to screen readers', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-      
-      renderWithProviders(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          isLoading={true}
-        />
-      );
-      
-      const loadingSpinner = screen.getByRole('status');
-      expect(loadingSpinner).toHaveTextContent('Loading...');
-    });
-  });
-
-  describe('Search and Filter Accessibility', () => {
-    it('has accessible search input', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-      
-      renderWithProviders(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          searchable={true}
-        />
-      );
-      
-      const searchInput = screen.getByTestId('search-input');
-      expect(searchInput).toHaveAttribute('role', 'searchbox');
-      expect(searchInput).toHaveAttribute('aria-label', 'Search table data');
-    });
-
-    it('has accessible column visibility toggle', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-      
-      renderWithProviders(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          enableColumnVisibility={true}
-        />
-      );
-      
-      const columnsToggle = screen.getByTestId('columns-toggle');
-      expect(columnsToggle).toHaveAttribute('aria-label', 'Toggle column visibility');
-      expect(columnsToggle).toHaveAttribute('aria-expanded', 'false');
-    });
-
-    it('has accessible grouping toggle', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-      
-      renderWithProviders(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          enableGrouping={true}
-        />
-      );
-      
-      const groupToggle = screen.getByTestId('group-toggle');
-      expect(groupToggle).toHaveAttribute('aria-label', 'Toggle grouping');
-      expect(groupToggle).toHaveAttribute('aria-expanded', 'false');
-    });
-  });
-
-  describe('Action Accessibility', () => {
-    it('has accessible action buttons', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-      
-      renderWithProviders(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          enableEditing={true}
-          enableDeletion={true}
-        />
-      );
-      
-      const editButtons = screen.getAllByTestId(/edit-\d+/);
-      const deleteButtons = screen.getAllByTestId(/delete-\d+/);
-      
-      editButtons.forEach((button, index) => {
-        expect(button).toHaveAttribute('aria-label', `Edit row ${index + 1}`);
-      });
-      
-      deleteButtons.forEach((button, index) => {
-        expect(button).toHaveAttribute('aria-label', `Delete row ${index + 1}`);
-      });
-    });
-
-  });
-
-  describe('Pagination Accessibility', () => {
-    it('has accessible pagination controls', () => {
-      const columns = createTestColumns();
-      const data = createTestData(25); // More data to trigger pagination
-      
-      renderWithProviders(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          paginated={true}
-        />
-      );
-      
-      const pagination = screen.getByTestId('pagination');
-      expect(pagination).toHaveAttribute('role', 'navigation');
-      expect(pagination).toHaveAttribute('aria-label', 'Table pagination');
-      
-      const prevButton = screen.getByTestId('prev-page');
-      const nextButton = screen.getByTestId('next-page');
-      
-      expect(prevButton).toHaveAttribute('aria-label', 'Go to previous page');
-      expect(nextButton).toHaveAttribute('aria-label', 'Go to next page');
-    });
-
-    it('announces page changes', () => {
-      const columns = createTestColumns();
-      const data = createTestData(25);
-      
-      renderWithProviders(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          paginated={true}
-        />
-      );
-      
-      const pageInfo = screen.getByTestId('page-info');
-      expect(pageInfo).toHaveAttribute('aria-live', 'polite');
-      expect(pageInfo).toHaveTextContent('Page 1');
-    });
-  });
-
-  describe('Keyboard Navigation', () => {
-    it('supports keyboard navigation for interactive elements', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-      
-      renderWithProviders(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          searchable={true}
-          enableColumnVisibility={true}
-          enableEditing={true}
-        />
-      );
-      
-      // All interactive elements should be keyboard accessible
-      const interactiveElements = screen.getAllByRole('button');
-      interactiveElements.forEach(element => {
-        expect(element).toHaveAttribute('tabIndex', '0');
-      });
-      
-      const searchInput = screen.getByTestId('search-input');
-      expect(searchInput).toHaveAttribute('role', 'searchbox');
-    });
-  });
-
-  describe('Screen Reader Support', () => {
-    it('provides proper ARIA labels for all interactive elements', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-      
-      renderWithProviders(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          searchable={true}
-          enableColumnVisibility={true}
-          enableEditing={true}
-          enableDeletion={true}
-        />
-      );
-      
-      // Check that all interactive elements have proper ARIA labels
-      const searchInput = screen.getByTestId('search-input');
-      const columnsToggle = screen.getByTestId('columns-toggle');
-      const editButtons = screen.getAllByTestId(/edit-\d+/);
-      
-      expect(searchInput).toHaveAttribute('aria-label', 'Search table data');
-      expect(columnsToggle).toHaveAttribute('aria-label', 'Toggle column visibility');
-      
-      editButtons.forEach((button, index) => {
-        expect(button).toHaveAttribute('aria-label', `Edit row ${index + 1}`);
-      });
-    });
-
-    it('announces dynamic content changes', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-      
-      renderWithProviders(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          searchable={true}
-        />
-      );
-      
-      const searchInput = screen.getByTestId('search-input');
-      
-      // Simulate search input
-      searchInput.setAttribute('value', 'test search');
-      
-      // The table should have proper ARIA live regions for dynamic content
-      const table = screen.getByRole('table');
-      expect(table).toBeInTheDocument();
-    });
-  });
-
-  // ============================================================================
-  // SORTING ACCESSIBILITY TESTS
-  // ============================================================================
-  
-  describe('Sorting Accessibility', () => {
-    it('provides proper ARIA labels for sortable columns', () => {
-      const sortableColumns = [
-        { accessorKey: 'name', header: 'Name', sortable: true },
-        { accessorKey: 'email', header: 'Email', sortable: true }
-      ];
-      
-      renderWithProviders(
-        <DataTable 
-          columns={sortableColumns} 
-          data={createTestData(2)}
-          sortable={true}
-        />
-      );
-      
-      // Check for proper ARIA labels on sort buttons
-      const nameSortButton = screen.getByRole('button', { name: /sort by name/i });
-      const emailSortButton = screen.getByRole('button', { name: /sort by email/i });
-      
-      expect(nameSortButton).toHaveAttribute('aria-label', 'Sort by Name');
-      expect(emailSortButton).toHaveAttribute('aria-label', 'Sort by Email');
-    });
-
-    it('maintains keyboard navigation for sorting', () => {
-      const sortableColumns = [
-        { accessorKey: 'name', header: 'Name', sortable: true }
-      ];
-      
-      renderWithProviders(
-        <DataTable 
-          columns={sortableColumns} 
-          data={createTestData(2)}
-          sortable={true}
-        />
-      );
-      
-      const sortButton = screen.getByRole('button', { name: /sort by name/i });
-      
-      // Sort button should be keyboard accessible
-      expect(sortButton).toHaveAttribute('tabIndex', '0');
-      expect(sortButton).not.toHaveAttribute('aria-disabled', 'true');
-    });
-
-    it('provides proper ARIA sort attributes', () => {
-      const sortableColumns = [
-        { accessorKey: 'name', header: 'Name', sortable: true }
-      ];
-      
-      renderWithProviders(
-        <DataTable 
-          columns={sortableColumns} 
-          data={createTestData(2)}
-          sortable={true}
-        />
-      );
-      
-      // Table headers should have proper ARIA sort attributes
-      const table = screen.getByRole('table');
-      const headers = table.querySelectorAll('th');
-      
-      // At least one header should have aria-sort attribute
-      const hasAriaSort = Array.from(headers).some(header => 
-        header.hasAttribute('aria-sort')
-      );
-      expect(hasAriaSort).toBe(true);
-    });
-
-    it('distinguishes between sortable and non-sortable columns', () => {
-      const mixedColumns = [
-        { accessorKey: 'name', header: 'Name', sortable: true },
-        { accessorKey: 'role', header: 'Role', sortable: false }
-      ];
-      
-      renderWithProviders(
-        <DataTable 
-          columns={mixedColumns} 
-          data={createTestData(2)}
-          sortable={true}
-        />
-      );
-      
-      // Sortable column should have button
-      const nameHeader = screen.getByRole('button', { name: /sort by name/i });
-      expect(nameHeader).toBeInTheDocument();
-      
-      // Non-sortable column should not have button
-      const roleHeader = screen.getByText('Role');
-      expect(roleHeader).toBeInTheDocument();
-      expect(roleHeader.closest('button')).toBeNull();
-    });
-  });
-});