@jmruthers/pace-core 0.2.7 → 0.5.1

package/src/components/RBAC/__tests__/RBACProvider.accessibility.test.tsx

@@ -1,475 +0,0 @@
-import React from 'react';
-import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { axe, toHaveNoViolations } from 'jest-axe';
-import '@testing-library/jest-dom';
-import { describe, it, expect } from 'vitest';
-import { RBACProvider, useRBAC } from '../RBACProvider';
-import { AccessLevel } from '../../../types/unified';
-import { renderWithProviders, rerenderWithProviders } from '../../../__tests__/shared';
-
-// Extend expect to include axe matchers
-expect.extend(toHaveNoViolations);
-
-// Test components for accessibility scenarios
-const AccessiblePermissionButton = ({ permission, children, ...props }: { permission: string; children: React.ReactNode; [key: string]: any }) => {
-  const { hasPermission } = useRBAC();
-  if (!hasPermission(permission)) return null;
-  return (
-    <button 
-      aria-label={`${permission} action`}
-      {...props}
-    >
-      {children}
-    </button>
-  );
-};
-
-const AccessibleAccessLevelComponent = ({ requiredLevel, children, ...props }: { requiredLevel: AccessLevel; children: React.ReactNode; [key: string]: any }) => {
-  const { hasAccessLevel } = useRBAC();
-  if (!hasAccessLevel(requiredLevel)) return null;
-  return (
-    <div 
-      role="region"
-      aria-label={`${requiredLevel} level content`}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-};
-
-const AccessibleNavigation = () => {
-  const { hasPermission, hasAccessLevel } = useRBAC();
-  
-  return (
-    <nav role="navigation" aria-label="Main navigation">
-      <ul>
-        <li>
-          <a href="/dashboard" aria-label="Dashboard">Dashboard</a>
-        </li>
-        {hasPermission('reports.view') && (
-          <li>
-            <a href="/reports" aria-label="Reports">Reports</a>
-          </li>
-        )}
-        {hasAccessLevel(AccessLevel.ADMIN) && (
-          <li>
-            <a href="/admin" aria-label="Admin panel">Admin</a>
-          </li>
-        )}
-        {hasPermission('users.manage') && (
-          <li>
-            <a href="/users" aria-label="User management">Users</a>
-          </li>
-        )}
-      </ul>
-    </nav>
-  );
-};
-
-const AccessibleForm = () => {
-  const { hasPermission } = useRBAC();
-  
-  return (
-    <form role="form" aria-label="Data entry form">
-      <fieldset>
-        <legend>User Information</legend>
-        <label htmlFor="name">Name:</label>
-        <input id="name" type="text" />
-        
-        <label htmlFor="email">Email:</label>
-        <input id="email" type="email" />
-        
-        {hasPermission('admin.actions') && (
-          <>
-            <label htmlFor="role">Role:</label>
-            <select id="role">
-              <option value="user">User</option>
-              <option value="admin">Admin</option>
-            </select>
-          </>
-        )}
-      </fieldset>
-      
-      <button type="submit" aria-label="Submit form">
-        Submit
-      </button>
-    </form>
-  );
-};
-
-const AccessibleStatusIndicator = () => {
-  const { accessLevel, permissions } = useRBAC();
-  
-  const activePermissions = Object.entries(permissions)
-    .filter(([, has]) => has)
-    .map(([perm]) => perm);
-  
-  return (
-    <div role="status" aria-live="polite">
-      <p>Current access level: {accessLevel}</p>
-      <p>Active permissions: {activePermissions.length}</p>
-      <ul aria-label="Active permissions list">
-        {activePermissions.map(perm => (
-          <li key={perm}>{perm}</li>
-        ))}
-      </ul>
-    </div>
-  );
-};
-
-describe('RBACProvider Accessibility', () => {
-  describe('WCAG Compliance', () => {
-    it('should not have any WCAG violations', async () => {
-      const { container } = renderWithProviders(
-        <RBACProvider permissions={{ read: true, write: false }} accessLevel={AccessLevel.EDITOR}>
-          <div>
-            <h1>Accessibility Test</h1>
-            <AccessiblePermissionButton permission="read">Read Data</AccessiblePermissionButton>
-            <AccessiblePermissionButton permission="write">Write Data</AccessiblePermissionButton>
-            <AccessibleAccessLevelComponent requiredLevel={AccessLevel.VIEWER}>
-              Viewer Content
-            </AccessibleAccessLevelComponent>
-            <AccessibleAccessLevelComponent requiredLevel={AccessLevel.ADMIN}>
-              Admin Content
-            </AccessibleAccessLevelComponent>
-          </div>
-        </RBACProvider>
-      );
-
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-
-    it('should maintain accessibility when permissions change', async () => {
-      const { container, rerender } = renderWithProviders(
-        <RBACProvider permissions={{ admin: true }} accessLevel={AccessLevel.ADMIN}>
-          <AccessibleNavigation />
-        </RBACProvider>
-      );
-
-      let results = await axe(container);
-      expect(results).toHaveNoViolations();
-
-      // Change permissions
-      rerenderWithProviders(
-        <RBACProvider permissions={{ admin: false }} accessLevel={AccessLevel.VIEWER}>
-          <AccessibleNavigation />
-        </RBACProvider>
-      );
-
-      results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-  });
-
-  describe('Screen Reader Support', () => {
-    it('should provide appropriate ARIA labels for permission-based content', () => {
-      renderWithProviders(
-        <RBACProvider permissions={{ 'reports.view': true, 'admin.panel': false }}>
-          <AccessiblePermissionButton permission="reports.view">
-            View Reports
-          </AccessiblePermissionButton>
-          <AccessiblePermissionButton permission="admin.panel">
-            Admin Panel
-          </AccessiblePermissionButton>
-        </RBACProvider>
-      );
-
-      expect(screen.getByLabelText('reports.view action')).toBeInTheDocument();
-      expect(screen.queryByLabelText('admin.panel action')).not.toBeInTheDocument();
-    });
-
-    it('should provide appropriate ARIA labels for access level content', () => {
-      renderWithProviders(
-        <RBACProvider accessLevel={AccessLevel.EDITOR}>
-          <AccessibleAccessLevelComponent requiredLevel={AccessLevel.VIEWER}>
-            Viewer Content
-          </AccessibleAccessLevelComponent>
-          <AccessibleAccessLevelComponent requiredLevel={AccessLevel.ADMIN}>
-            Admin Content
-          </AccessibleAccessLevelComponent>
-        </RBACProvider>
-      );
-
-      expect(screen.getByLabelText('viewer level content')).toBeInTheDocument();
-      expect(screen.queryByLabelText('admin level content')).not.toBeInTheDocument();
-    });
-
-    it('should announce permission changes to screen readers', () => {
-      renderWithProviders(
-        <RBACProvider permissions={{ 'status.update': true }}>
-          <AccessibleStatusIndicator />
-        </RBACProvider>
-      );
-
-      const statusRegion = screen.getByRole('status');
-      expect(statusRegion).toHaveAttribute('aria-live', 'polite');
-      expect(statusRegion).toHaveTextContent('Active permissions: 1');
-    });
-  });
-
-  describe('Keyboard Navigation', () => {
-    it('should maintain logical tab order with permission-based content', async () => {
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <RBACProvider permissions={{ 'action1': true, 'action2': false, 'action3': true }}>
-          <button>First Button</button>
-          <AccessiblePermissionButton permission="action1">Action 1</AccessiblePermissionButton>
-          <AccessiblePermissionButton permission="action2">Action 2</AccessiblePermissionButton>
-          <AccessiblePermissionButton permission="action3">Action 3</AccessiblePermissionButton>
-          <button>Last Button</button>
-        </RBACProvider>
-      );
-
-      const firstButton = screen.getByText('First Button');
-      const action1Button = screen.getByText('Action 1');
-      const action3Button = screen.getByText('Action 3');
-      const lastButton = screen.getByText('Last Button');
-
-      // Focus should skip the hidden Action 2 button
-      firstButton.focus();
-      expect(firstButton).toHaveFocus();
-
-      await user.tab();
-      expect(action1Button).toHaveFocus();
-
-      await user.tab();
-      expect(action3Button).toHaveFocus();
-
-      await user.tab();
-      expect(lastButton).toHaveFocus();
-    });
-
-    it('should handle keyboard navigation in navigation menus', async () => {
-      const user = userEvent.setup();
-      
-      renderWithProviders(
-        <RBACProvider permissions={{ 'reports.view': true, 'users.manage': false }} accessLevel={AccessLevel.ADMIN}>
-          <AccessibleNavigation />
-        </RBACProvider>
-      );
-
-      const dashboardLink = screen.getByLabelText('Dashboard');
-      const reportsLink = screen.getByLabelText('Reports');
-      const adminLink = screen.getByLabelText('Admin panel');
-      const usersLink = screen.queryByLabelText('User management');
-
-      expect(usersLink).not.toBeInTheDocument();
-
-      dashboardLink.focus();
-      expect(dashboardLink).toHaveFocus();
-
-      await user.tab();
-      expect(reportsLink).toHaveFocus();
-
-      await user.tab();
-      expect(adminLink).toHaveFocus();
-    });
-  });
-
-  describe('Focus Management', () => {
-    it('should not create focus traps when content is hidden', () => {
-      renderWithProviders(
-        <RBACProvider permissions={{ 'hidden.content': false }}>
-          <button>Before</button>
-          <AccessiblePermissionButton permission="hidden.content">
-            Hidden Button
-          </AccessiblePermissionButton>
-          <button>After</button>
-        </RBACProvider>
-      );
-
-      const beforeButton = screen.getByText('Before');
-      const afterButton = screen.getByText('After');
-      const hiddenButton = screen.queryByText('Hidden Button');
-
-      expect(hiddenButton).not.toBeInTheDocument();
-      expect(beforeButton).toBeInTheDocument();
-      expect(afterButton).toBeInTheDocument();
-    });
-
-    it('should maintain focus when access level changes', async () => {
-      const user = userEvent.setup();
-      
-      const { rerender } = renderWithProviders(
-        <RBACProvider accessLevel={AccessLevel.VIEWER}>
-          <AccessibleAccessLevelComponent requiredLevel={AccessLevel.EDITOR}>
-            <button>Editor Button</button>
-          </AccessibleAccessLevelComponent>
-        </RBACProvider>
-      );
-
-      // Button should not be visible at VIEWER level
-      expect(screen.queryByText('Editor Button')).not.toBeInTheDocument();
-
-      // Change to EDITOR level
-      rerenderWithProviders(
-        <RBACProvider accessLevel={AccessLevel.EDITOR}>
-          <AccessibleAccessLevelComponent requiredLevel={AccessLevel.EDITOR}>
-            <button>Editor Button</button>
-          </AccessibleAccessLevelComponent>
-        </RBACProvider>
-      );
-
-      const editorButton = screen.getByText('Editor Button');
-      expect(editorButton).toBeInTheDocument();
-      
-      editorButton.focus();
-      expect(editorButton).toHaveFocus();
-    });
-  });
-
-  describe('ARIA Attributes and Roles', () => {
-    it('should use appropriate ARIA roles for navigation', () => {
-      renderWithProviders(
-        <RBACProvider permissions={{ 'reports.view': true }}>
-          <AccessibleNavigation />
-        </RBACProvider>
-      );
-
-      const nav = screen.getByRole('navigation');
-      expect(nav).toHaveAttribute('aria-label', 'Main navigation');
-    });
-
-    it('should use appropriate ARIA roles for forms', () => {
-      renderWithProviders(
-        <RBACProvider permissions={{ 'admin.actions': true }}>
-          <AccessibleForm />
-        </RBACProvider>
-      );
-
-      const form = screen.getByRole('form');
-      expect(form).toHaveAttribute('aria-label', 'Data entry form');
-      
-      const fieldset = form.querySelector('fieldset');
-      expect(fieldset).toBeInTheDocument();
-      
-      const legend = fieldset?.querySelector('legend');
-      expect(legend).toHaveTextContent('User Information');
-    });
-
-    it('should use appropriate ARIA roles for status updates', () => {
-      renderWithProviders(
-        <RBACProvider permissions={{ 'status.read': true }} accessLevel={AccessLevel.EDITOR}>
-          <AccessibleStatusIndicator />
-        </RBACProvider>
-      );
-
-      const statusRegion = screen.getByRole('status');
-      expect(statusRegion).toHaveAttribute('aria-live', 'polite');
-    });
-  });
-
-  describe('Color and Contrast', () => {
-    it('should maintain sufficient color contrast for all visible content', async () => {
-      const { container } = renderWithProviders(
-        <RBACProvider permissions={{ 'content.view': true }}>
-          <div style={{ color: '#000000', backgroundColor: '#ffffff' }}>
-            <h1>High Contrast Content</h1>
-            <p>This content should have sufficient contrast</p>
-            <AccessiblePermissionButton permission="content.view">
-              High Contrast Button
-            </AccessiblePermissionButton>
-          </div>
-        </RBACProvider>
-      );
-
-      const results = await axe(container, {
-        rules: {
-          'color-contrast': { enabled: true }
-        }
-      });
-      
-      expect(results).toHaveNoViolations();
-    });
-  });
-
-  describe('Responsive Design', () => {
-    it('should maintain accessibility on different screen sizes', async () => {
-      // Simulate mobile viewport
-      Object.defineProperty(window, 'innerWidth', {
-        writable: true,
-        configurable: true,
-        value: 375,
-      });
-
-      const { container } = renderWithProviders(
-        <RBACProvider permissions={{ 'mobile.action': true }}>
-          <div style={{ width: '100%', maxWidth: '375px' }}>
-            <AccessiblePermissionButton permission="mobile.action">
-              Mobile Action
-            </AccessiblePermissionButton>
-          </div>
-        </RBACProvider>
-      );
-
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-  });
-
-  describe('Internationalization', () => {
-    it('should support RTL languages', () => {
-      renderWithProviders(
-        <RBACProvider permissions={{ 'rtl.content': true }}>
-          <div dir="rtl" lang="ar">
-            <AccessiblePermissionButton permission="rtl.content">
-              محتوى عربي
-            </AccessiblePermissionButton>
-          </div>
-        </RBACProvider>
-      );
-
-      const rtlButton = screen.getByText('محتوى عربي');
-      expect(rtlButton).toBeInTheDocument();
-      expect(rtlButton.closest('div')).toHaveAttribute('dir', 'rtl');
-      expect(rtlButton.closest('div')).toHaveAttribute('lang', 'ar');
-    });
-
-    it('should maintain accessibility with different languages', async () => {
-      const { container } = renderWithProviders(
-        <RBACProvider permissions={{ 'multi.lang': true }}>
-          <div lang="es">
-            <h1>Contenido en Español</h1>
-            <AccessiblePermissionButton permission="multi.lang">
-              Acción en Español
-            </AccessiblePermissionButton>
-          </div>
-        </RBACProvider>
-      );
-
-      const results = await axe(container);
-      expect(results).toHaveNoViolations();
-    });
-  });
-
-  describe('Error States', () => {
-    it('should provide accessible error messages', () => {
-      const ErrorComponent = () => {
-        const { hasPermission } = useRBAC();
-        if (!hasPermission('required.permission')) {
-          return (
-            <div role="alert" aria-live="assertive">
-              <p>You do not have permission to access this content.</p>
-              <p>Required permission: required.permission</p>
-            </div>
-          );
-        }
-        return <div>Content</div>;
-      };
-
-      renderWithProviders(
-        <RBACProvider permissions={{ 'required.permission': false }}>
-          <ErrorComponent />
-        </RBACProvider>
-      );
-
-      const alert = screen.getByRole('alert');
-      expect(alert).toHaveAttribute('aria-live', 'assertive');
-      expect(alert).toHaveTextContent('You do not have permission to access this content.');
-    });
-  });
-});