@coreui/react-pro 5.20.0 → 5.22.0

package/src/components/calendar/__tests__/CCalendar.accessibility.spec.tsx

@@ -0,0 +1,595 @@
+import * as React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom'
+import { CCalendar } from '../CCalendar'
+
+// Mock axe for accessibility testing
+import { axe, toHaveNoViolations } from 'jest-axe'
+
+expect.extend(toHaveNoViolations)
+
+describe('CCalendar Accessibility', () => {
+  let user: ReturnType<typeof userEvent.setup>
+
+  beforeEach(() => {
+    user = userEvent.setup()
+    jest.clearAllMocks()
+  })
+
+  describe('ARIA Compliance', () => {
+    it('has proper role attribute', () => {
+      render(<CCalendar />)
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+      expect(calendar).toHaveAttribute('role', 'application')
+    })
+
+    it('has accessible name', () => {
+      render(<CCalendar aria-label="Date picker" />)
+      const calendar = screen.getByRole('application')
+      expect(calendar).toHaveAccessibleName('Date picker')
+    })
+
+    it('has describedby for help text', () => {
+      render(
+        <div>
+          <CCalendar aria-describedby="calendar-help" />
+          <div id="calendar-help">Use arrow keys to navigate dates</div>
+        </div>
+      )
+      const calendar = screen.getByRole('application')
+      expect(calendar).toHaveAttribute('aria-describedby', 'calendar-help')
+    })
+
+    it('has proper tabindex for focus management', () => {
+      render(<CCalendar />)
+      const calendar = screen.getByRole('application')
+      expect(calendar).toHaveAttribute('tabindex', '0')
+    })
+
+    it('announces selected date changes', () => {
+      render(<CCalendar aria-live="polite" />)
+      const calendar = screen.getByRole('application')
+      expect(calendar).toHaveAttribute('aria-live', 'polite')
+    })
+
+    it('has proper aria-expanded for dropdowns', () => {
+      render(<CCalendar navigation />)
+      // This would check month/year dropdowns if they exist
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('has aria-disabled for disabled dates', () => {
+      const disabledDate = new Date(2022, 1, 16)
+      render(<CCalendar disabledDate={[disabledDate]} />)
+      
+      // This would check for specific date cells with aria-disabled
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('has aria-selected for selected dates', () => {
+      render(<CCalendar calendarDate="2/16/2022" />)
+      
+      // This would check for specific date cells with aria-selected
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('has proper heading structure', () => {
+      render(<CCalendar navigation />)
+      
+      // Check for proper heading hierarchy (h1, h2, etc.)
+      // Month/year headers should be proper headings
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('has landmark regions', () => {
+      render(<CCalendar />)
+      
+      // Calendar should be within a proper landmark
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+  })
+
+  describe('Keyboard Navigation', () => {
+    it('is keyboard accessible', async () => {
+      render(<CCalendar />)
+      const calendar = screen.getByRole('application')
+      
+      // Should be focusable
+      calendar.focus()
+      expect(calendar).toHaveFocus()
+      
+      // Should respond to arrow keys
+      await user.keyboard('{ArrowRight}')
+      await user.keyboard('{ArrowDown}')
+      await user.keyboard('{ArrowLeft}')
+      await user.keyboard('{ArrowUp}')
+      
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('supports Enter for selection', async () => {
+      const onCalendarDateChange = jest.fn()
+      render(<CCalendar onCalendarDateChange={onCalendarDateChange} />)
+      
+      const calendar = screen.getByRole('application')
+      calendar.focus()
+      
+      await user.keyboard('{Enter}')
+      
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('supports Space for selection', async () => {
+      const onCalendarDateChange = jest.fn()
+      render(<CCalendar onCalendarDateChange={onCalendarDateChange} />)
+      
+      const calendar = screen.getByRole('application')
+      calendar.focus()
+      
+      await user.keyboard('{Space}')
+      
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('supports Escape to close', async () => {
+      render(<CCalendar />)
+      
+      const calendar = screen.getByRole('application')
+      calendar.focus()
+      
+      await user.keyboard('{Escape}')
+      
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('supports Tab for focus management', async () => {
+      render(
+        <div>
+          <button>Previous element</button>
+          <CCalendar />
+          <button>Next element</button>
+        </div>
+      )
+      
+      const prevButton = screen.getByText('Previous element')
+      const nextButton = screen.getByText('Next element')
+      
+      prevButton.focus()
+      
+      // Tab into calendar
+      await user.keyboard('{Tab}')
+      
+      const calendar = screen.getByRole('application')
+      expect(calendar).toHaveFocus()
+      
+      // Tab out of calendar
+      await user.keyboard('{Tab}')
+      expect(nextButton).toHaveFocus()
+    })
+
+    it('supports Home/End for navigation', async () => {
+      render(<CCalendar />)
+      
+      const calendar = screen.getByRole('application')
+      calendar.focus()
+      
+      await user.keyboard('{Home}')
+      await user.keyboard('{End}')
+      
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('supports PageUp/PageDown for month navigation', async () => {
+      render(<CCalendar />)
+      
+      const calendar = screen.getByRole('application')
+      calendar.focus()
+      
+      await user.keyboard('{PageUp}')
+      await user.keyboard('{PageDown}')
+      
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('skips disabled dates during keyboard navigation', async () => {
+      const disabledDate = new Date(2022, 1, 16)
+      render(<CCalendar disabledDate={[disabledDate]} />)
+      
+      const calendar = screen.getByRole('application')
+      calendar.focus()
+      
+      // Navigation should skip over disabled dates
+      await user.keyboard('{ArrowRight}')
+      
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('handles keyboard navigation in range mode', async () => {
+      render(<CCalendar range />)
+      
+      const calendar = screen.getByRole('application')
+      calendar.focus()
+      
+      // Start range selection
+      await user.keyboard('{Enter}')
+      
+      // Navigate to end date
+      await user.keyboard('{ArrowRight}{ArrowRight}{ArrowRight}')
+      
+      // Complete range selection
+      await user.keyboard('{Enter}')
+      
+      expect(calendar).toBeInTheDocument()
+    })
+  })
+
+  describe('Screen Reader Support', () => {
+    it('has proper accessible names for dates', () => {
+      render(<CCalendar calendarDate="2/16/2022" />)
+      
+      // Date cells should have accessible names like "February 16, 2022"
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('announces navigation changes', () => {
+      render(<CCalendar />)
+      
+      // Should have live regions for announcements
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('provides context for date states', () => {
+      const disabledDate = new Date(2022, 1, 16)
+      render(<CCalendar disabledDate={[disabledDate]} />)
+      
+      // Disabled dates should be announced as such
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('announces range selection state', () => {
+      render(<CCalendar range startDate="2/16/2022" endDate="2/20/2022" />)
+      
+      // Range dates should be properly announced
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('provides month and year context', () => {
+      render(<CCalendar calendarDate="2/16/2022" />)
+      
+      // Current month/year should be announced or available to screen readers
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('announces view changes', () => {
+      render(<CCalendar />)
+      
+      // View changes (day/month/year view) should be announced
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+  })
+
+  describe('High Contrast Mode', () => {
+    beforeEach(() => {
+      // Mock high contrast media query
+      Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: jest.fn().mockImplementation(query => ({
+          matches: query.includes('prefers-contrast: high'),
+          media: query,
+          onchange: null,
+          addListener: jest.fn(),
+          removeListener: jest.fn(),
+          addEventListener: jest.fn(),
+          removeEventListener: jest.fn(),
+          dispatchEvent: jest.fn(),
+        })),
+      })
+    })
+
+    it('maintains visibility in high contrast mode', () => {
+      render(<CCalendar />)
+      
+      const calendar = screen.getByRole('application')
+      
+      // Elements should still be visible and accessible
+      expect(calendar).toBeInTheDocument()
+      expect(calendar).toBeVisible()
+    })
+
+    it('has sufficient contrast for text', () => {
+      render(<CCalendar />)
+      
+      // Text should maintain adequate contrast ratios
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('has visible focus indicators', () => {
+      render(<CCalendar />)
+      
+      const calendar = screen.getByRole('application')
+      calendar.focus()
+      
+      // Focus should be clearly visible in high contrast mode
+      expect(calendar).toHaveFocus()
+    })
+  })
+
+  describe('Reduced Motion', () => {
+    beforeEach(() => {
+      // Mock reduced motion preference
+      Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: jest.fn().mockImplementation(query => ({
+          matches: query.includes('prefers-reduced-motion: reduce'),
+          media: query,
+          onchange: null,
+          addListener: jest.fn(),
+          removeListener: jest.fn(),
+          addEventListener: jest.fn(),
+          removeEventListener: jest.fn(),
+          dispatchEvent: jest.fn(),
+        })),
+      })
+    })
+
+    it('respects reduced motion preferences', () => {
+      render(<CCalendar />)
+      
+      // Animations should be reduced or disabled
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('maintains functionality without animations', () => {
+      render(<CCalendar />)
+      
+      // All functionality should work without animations
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+  })
+
+  describe('Touch Accessibility', () => {
+    it('has adequate touch targets', () => {
+      render(<CCalendar />)
+      
+      const calendar = screen.getByRole('application')
+      
+      // Touch targets should be at least 44x44 pixels
+      // This would need to check actual date cell sizes
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('supports touch navigation', () => {
+      render(<CCalendar />)
+      
+      const calendar = screen.getByRole('application')
+      
+      // Should work with touch gestures
+      fireEvent.touchStart(calendar, {
+        touches: [{ clientX: 100, clientY: 100 }]
+      })
+      
+      fireEvent.touchEnd(calendar, {
+        changedTouches: [{ clientX: 100, clientY: 100 }]
+      })
+      
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('provides touch feedback', () => {
+      render(<CCalendar />)
+      
+      const calendar = screen.getByRole('application')
+      
+      // Touch interactions should provide appropriate feedback
+      expect(calendar).toBeInTheDocument()
+    })
+  })
+
+  describe('Localization Accessibility', () => {
+    it('supports RTL languages', () => {
+      render(<CCalendar locale="ar-SA" />)
+      
+      // Should work properly with right-to-left languages
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('has proper language attributes', () => {
+      render(<CCalendar locale="pl-PL" />)
+      
+      // Should have appropriate lang attributes
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('uses locale-appropriate date formats', () => {
+      render(<CCalendar locale="de-DE" />)
+      
+      // Date formats should match locale expectations
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+
+    it('provides translated content', () => {
+      render(<CCalendar locale="fr-FR" />)
+      
+      // Month names, day names should be localized
+      const calendar = screen.getByRole('application')
+      expect(calendar).toBeInTheDocument()
+    })
+  })
+
+  describe('Automated Accessibility Testing', () => {
+    it('passes axe accessibility tests', async () => {
+      const { container } = render(<CCalendar />)
+      
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('passes axe tests with various props', async () => {
+      const { container } = render(
+        <CCalendar 
+          navigation
+          range
+          calendarDate="2/16/2022"
+          startDate="2/10/2022"
+          endDate="2/20/2022"
+          minDate="1/1/2022"
+          maxDate="12/31/2022"
+          disabledDate={[new Date(2022, 1, 15)]}
+          locale="en-US"
+        />
+      )
+      
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('passes axe tests in different locales', async () => {
+      const locales = ['en-US', 'pl-PL', 'de-DE', 'fr-FR']
+      
+      for (const locale of locales) {
+        const { container } = render(<CCalendar locale={locale} />)
+        const results = await axe(container)
+        expect(results).toHaveNoViolations()
+      }
+    })
+
+    it('passes axe tests with dynamic content', async () => {
+      const TestComponent = () => {
+        const [date, setDate] = React.useState<string | null>("2/16/2022")
+        
+        React.useEffect(() => {
+          const timer = setTimeout(() => setDate("3/16/2022"), 100)
+          return () => clearTimeout(timer)
+        }, [])
+        
+        return <CCalendar calendarDate={date} />
+      }
+      
+      const { container } = render(<TestComponent />)
+      
+      // Test both initial and updated states
+      const initialResults = await axe(container)
+      expect(initialResults).toHaveNoViolations()
+      
+      // Wait for update
+      await new Promise(resolve => setTimeout(resolve, 150))
+      
+      const updatedResults = await axe(container)
+      expect(updatedResults).toHaveNoViolations()
+    })
+  })
+
+  describe('Error States Accessibility', () => {
+    it('announces validation errors', () => {
+      // Mock a validation error scenario
+      render(
+        <div>
+          <CCalendar aria-describedby="date-error" />
+          <div id="date-error" role="alert">
+            Please select a date within the allowed range
+          </div>
+        </div>
+      )
+      
+      const errorMessage = screen.getByRole('alert')
+      expect(errorMessage).toBeInTheDocument()
+      expect(errorMessage).toHaveTextContent('Please select a date within the allowed range')
+    })
+
+    it('maintains focus during error states', () => {
+      render(<CCalendar />)
+      
+      const calendar = screen.getByRole('application')
+      calendar.focus()
+      
+      // Even if there are errors, focus should be maintained appropriately
+      expect(calendar).toHaveFocus()
+    })
+
+    it('provides recovery instructions', () => {
+      render(
+        <div>
+          <CCalendar aria-describedby="instructions" />
+          <div id="instructions">
+            Use arrow keys to navigate. Press Enter to select a date.
+          </div>
+        </div>
+      )
+      
+      const instructions = screen.getByText(/Use arrow keys to navigate/)
+      expect(instructions).toBeInTheDocument()
+    })
+  })
+
+  describe('Complex Interaction Accessibility', () => {
+    it('maintains accessibility during range selection', async () => {
+      const { container } = render(<CCalendar range />)
+      
+      const calendar = screen.getByRole('application')
+      calendar.focus()
+      
+      // Start range selection
+      await user.keyboard('{Enter}')
+      
+      // Should maintain accessibility during partial selection
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('handles accessibility during view transitions', async () => {
+      const { container } = render(<CCalendar />)
+      
+      // Simulate view change (day -> month -> year)
+      const calendar = screen.getByRole('application')
+      
+      // Each view should be accessible
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('maintains accessibility with dynamic disabled dates', async () => {
+      const TestComponent = () => {
+        const [disabled, setDisabled] = React.useState<Date[]>([])
+        
+        React.useEffect(() => {
+          const timer = setTimeout(() => {
+            setDisabled([new Date(2022, 1, 16)])
+          }, 100)
+          return () => clearTimeout(timer)
+        }, [])
+        
+        return <CCalendar disabledDate={disabled} />
+      }
+      
+      const { container } = render(<TestComponent />)
+      
+      // Should be accessible both before and after disabled dates are added
+      const initialResults = await axe(container)
+      expect(initialResults).toHaveNoViolations()
+      
+      await new Promise(resolve => setTimeout(resolve, 150))
+      
+      const updatedResults = await axe(container)
+      expect(updatedResults).toHaveNoViolations()
+    })
+  })
+})