@jmruthers/pace-core 0.5.76 → 0.5.78

package/src/components/DataTable/__tests__/a11y.basic.test.tsx

@@ -0,0 +1,601 @@
+/**
+ * @file DataTable Accessibility Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Tests
+ * @since 0.4.0
+ * 
+ * Comprehensive accessibility tests for DataTable component.
+ * Tests WCAG 2.1 AA compliance and screen reader compatibility.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import userEvent from '@testing-library/user-event';
+import { vi, beforeEach, afterEach } from 'vitest';
+import { DataTable } from '../DataTable';
+import { MockRBACProvider } from './mocks/MockRBACProvider';
+import type { DataTableColumn } from '../types';
+
+// Mock the RBAC hooks
+vi.mock('../../../rbac/hooks', () => ({
+  useCan: vi.fn(() => ({ can: true, isLoading: false })),
+  useResolvedScope: vi.fn(() => ({ 
+    organisationId: 'test-org', 
+    eventId: 'test-event',
+    appId: 'test-app'
+  })),
+}));
+
+// Mock the UnifiedAuthProvider
+vi.mock('../../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: vi.fn(() => ({
+    user: { id: 'test-user', name: 'Test User' },
+    isLoading: false,
+    error: null,
+  })),
+}));
+
+// Mock the toast hook
+vi.mock('../../../hooks/useToast', () => ({
+  toast: vi.fn(),
+}));
+
+// Extend Jest matchers
+expect.extend(toHaveNoViolations);
+
+// Test data
+interface TestUser {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  status: 'active' | 'inactive';
+}
+
+const testUsers: TestUser[] = [
+  { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active' },
+  { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active' },
+  { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'inactive' },
+];
+
+const testColumns: DataTableColumn<TestUser>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    sortable: true,
+    searchable: true,
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    sortable: true,
+    searchable: true,
+  },
+  {
+    accessorKey: 'role',
+    header: 'Role',
+    sortable: true,
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    sortable: true,
+  },
+];
+
+const defaultFeatures = {
+  search: true,
+  pagination: true,
+  sorting: true,
+  filtering: true,
+  export: false,
+  import: false,
+  selection: true,
+  creation: false,
+  editing: false,
+  deletion: false,
+  deleteSelected: false,
+  grouping: false,
+  columnVisibility: false,
+  columnReordering: false,
+  hierarchical: false,
+};
+
+// Test wrapper component
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <MockRBACProvider>
+    {children}
+  </MockRBACProvider>
+);
+
+describe('DataTable Accessibility', () => {
+  beforeEach(() => {
+    // Clear any existing live regions
+    const existingLiveRegions = document.querySelectorAll('[aria-live]');
+    existingLiveRegions.forEach(region => {
+      if (region.parentNode) {
+        region.parentNode.removeChild(region);
+      }
+    });
+  });
+
+  afterEach(() => {
+    // Clean up live regions after each test
+    const liveRegions = document.querySelectorAll('[aria-live]');
+    liveRegions.forEach(region => {
+      if (region.parentNode) {
+        region.parentNode.removeChild(region);
+      }
+    });
+  });
+
+  describe('Semantic Structure', () => {
+    it('should use proper table semantics', () => {
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+            title="Users Table"
+            description="List of all users in the system"
+          />
+        </TestWrapper>
+      );
+
+      // Check for proper table structure
+      const table = screen.getByRole('table');
+      expect(table).toBeInTheDocument();
+      expect(table).toHaveAttribute('aria-label', 'Users Table');
+      expect(table).toHaveAttribute('aria-describedby', 'table-description');
+
+      // Check for table description
+      const description = screen.getByText('List of all users in the system');
+      expect(description).toHaveAttribute('id', 'table-description');
+    });
+
+    it('should have proper column headers with scope attributes', () => {
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      // Check column headers
+      const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+      expect(nameHeader).toHaveAttribute('scope', 'col');
+      expect(nameHeader).toHaveAttribute('role', 'columnheader');
+
+      const emailHeader = screen.getByRole('columnheader', { name: /email/i });
+      expect(emailHeader).toHaveAttribute('scope', 'col');
+      expect(emailHeader).toHaveAttribute('role', 'columnheader');
+    });
+
+    it('should have proper row and cell structure', () => {
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      // Check for rows
+      const rows = screen.getAllByRole('row');
+      expect(rows.length).toBeGreaterThan(1); // Header row + data rows
+
+      // Check for cells
+      const cells = screen.getAllByRole('cell');
+      expect(cells.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('ARIA States and Properties', () => {
+    it('should have proper aria-sort attributes on sortable columns', () => {
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      // Check initial sort state
+      const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+      expect(nameHeader).toHaveAttribute('aria-sort', 'none');
+    });
+
+    it('should update aria-sort when column is sorted', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+      const sortButton = nameHeader.querySelector('button');
+      
+      if (sortButton) {
+        // Click to sort ascending
+        await user.click(sortButton);
+        
+        await waitFor(() => {
+          expect(nameHeader).toHaveAttribute('aria-sort', 'ascending');
+        });
+
+        // Click to sort descending
+        await user.click(sortButton);
+        
+        await waitFor(() => {
+          expect(nameHeader).toHaveAttribute('aria-sort', 'descending');
+        });
+      }
+    });
+
+    it.skip('should have proper aria-selected on selectable rows', () => {
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      // Find data rows (exclude header row)
+      const rows = screen.getAllByRole('row');
+      const dataRows = rows.slice(1); // Skip header row
+
+      // Check that we have data rows and they have aria-selected
+      expect(dataRows.length).toBeGreaterThan(0);
+      
+      dataRows.forEach((row, index) => {
+        // Initially, rows should not be selected
+        const ariaSelected = row.getAttribute('aria-selected');
+        console.log(`Row ${index}:`, ariaSelected);
+        expect(row).toHaveAttribute('aria-selected');
+        expect(ariaSelected).toBe('false'); // Should be false initially
+      });
+    });
+
+    it('should have aria-busy when loading', () => {
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+            isLoading={true}
+          />
+        </TestWrapper>
+      );
+
+      // When loading, the table might not be rendered, so check for loading state
+      const loadingElement = screen.getByText('Loading...');
+      expect(loadingElement).toBeInTheDocument();
+      expect(loadingElement).toHaveAttribute('aria-live', 'polite');
+    });
+
+    it('should not have aria-busy when not loading', () => {
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+            isLoading={false}
+          />
+        </TestWrapper>
+      );
+
+      const table = screen.getByRole('table');
+      expect(table).toHaveAttribute('aria-busy', 'false');
+    });
+  });
+
+  describe('Live Region Announcements', () => {
+    it('should create a live region for announcements', () => {
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      // Check for live region
+      const liveRegion = document.querySelector('[aria-live="polite"]');
+      expect(liveRegion).toBeInTheDocument();
+    });
+
+    it('should announce sort changes', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+      const sortButton = nameHeader.querySelector('button');
+      
+      if (sortButton) {
+        await user.click(sortButton);
+        
+        // Wait for announcement
+        await waitFor(() => {
+          const liveRegion = document.querySelector('[aria-live="polite"]');
+          expect(liveRegion?.textContent).toContain('sorted by Name');
+        }, { timeout: 2000 });
+      }
+    });
+  });
+
+  describe('Empty State Accessibility', () => {
+    it('should have proper role and aria-live for empty state', () => {
+      render(
+        <TestWrapper>
+          <DataTable
+            data={[]}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      const emptyStates = screen.getAllByRole('status');
+      expect(emptyStates.length).toBeGreaterThan(0);
+      // Check that at least one has aria-live
+      const liveEmptyState = emptyStates.find(state => state.hasAttribute('aria-live'));
+      expect(liveEmptyState).toBeInTheDocument();
+      expect(liveEmptyState).toHaveAttribute('aria-live', 'polite');
+    });
+  });
+
+  describe('Keyboard Navigation', () => {
+    it('should support keyboard navigation for sortable headers', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+      const nameButton = nameHeader.querySelector('button');
+      
+      // Focus the button inside the header
+      nameButton?.focus();
+      expect(nameButton).toHaveFocus();
+
+      // Press Enter to sort
+      await user.keyboard('{Enter}');
+      
+      await waitFor(() => {
+        expect(nameHeader).toHaveAttribute('aria-sort', 'ascending');
+      });
+    });
+
+    it.skip('should have proper tab order', () => {
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      // Check that sortable headers are focusable
+      const sortableHeaders = screen.getAllByRole('columnheader').filter(header => 
+        header.hasAttribute('tabindex') && header.getAttribute('tabindex') === '0'
+      );
+      
+      expect(sortableHeaders.length).toBeGreaterThan(0);
+    });
+  });
+
+  describe('Screen Reader Labels', () => {
+    it('should have proper aria-labels for sort buttons', () => {
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+      const sortButton = nameHeader.querySelector('button');
+      
+      if (sortButton) {
+        expect(sortButton).toHaveAttribute('aria-label');
+        expect(sortButton.getAttribute('aria-label')).toContain('Sort');
+        expect(sortButton.getAttribute('aria-label')).toContain('Name');
+      }
+    });
+
+    it('should have proper aria-labels for expand/collapse buttons', async () => {
+      const hierarchicalData = [
+        { id: '1', name: 'Parent 1', isParent: true, parentId: null },
+        { id: '2', name: 'Child 1', isParent: false, parentId: '1' },
+      ];
+
+      const hierarchicalFeatures = {
+        ...defaultFeatures,
+        hierarchical: true,
+      };
+
+      render(
+        <TestWrapper>
+          <DataTable
+            data={hierarchicalData}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={hierarchicalFeatures}
+            hierarchical={{
+              enabled: true,
+              defaultExpanded: false,
+            }}
+          />
+        </TestWrapper>
+      );
+
+      // Look for expand buttons
+      const expandButtons = screen.queryAllByLabelText(/expand row|collapse row/i);
+      expandButtons.forEach(button => {
+        expect(button).toHaveAttribute('aria-label');
+        expect(button).toHaveAttribute('title');
+      });
+    });
+  });
+
+  describe('Axe Accessibility Tests', () => {
+    it('should not have any accessibility violations', async () => {
+      const { container } = render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+            title="Users Table"
+            description="List of all users in the system"
+          />
+        </TestWrapper>
+      );
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it('should not have accessibility violations with empty data', async () => {
+      const { container } = render(
+        <TestWrapper>
+          <DataTable
+            data={[]}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+            title="Empty Table"
+          />
+        </TestWrapper>
+      );
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it('should not have accessibility violations when loading', async () => {
+      const { container } = render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+            isLoading={true}
+          />
+        </TestWrapper>
+      );
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+
+    it('should not have accessibility violations with selection enabled', async () => {
+      const { container } = render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={{
+              ...defaultFeatures,
+              selection: true,
+            }}
+          />
+        </TestWrapper>
+      );
+
+      const results = await axe(container);
+      expect(results).toHaveNoViolations();
+    });
+  });
+
+  describe('Focus Management', () => {
+    it('should maintain focus when sorting', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+      const sortButton = nameHeader.querySelector('button');
+      
+      if (sortButton) {
+        // Focus and click the sort button
+        sortButton.focus();
+        await user.click(sortButton);
+        
+        // Focus should remain on the button after sorting
+        await waitFor(() => {
+          expect(document.activeElement).toBe(sortButton);
+        });
+      }
+    });
+  });
+});