@therealtinhtute/baroiplayer 1.2.0 → 2.0.0-beta.1

package/src/components/__tests__/media-player-accessibility.test.tsx

@@ -1,510 +0,0 @@
-import { render, screen, waitFor } from "@testing-library/react"
-import { userEvent } from "@testing-library/user-event"
-import { afterEach, beforeEach, describe, expect, it } from "vitest"
-import { a11yTestUtils } from "../../test/accessibility-utils"
-import { setupMediaMocks } from "../../test/media-mocks"
-import { MediaPlayer } from "../media-player"
-
-// Mock axe for accessibility testing
-const mockAxe = {
-	run: vi.fn().mockResolvedValue({
-		violations: [],
-		passes: [],
-		incomplete: [],
-		url: "mock-url"
-	})
-}
-
-describe("Media Player Accessibility", () => {
-	beforeEach(() => {
-		setupMediaMocks()
-		vi.clearAllMocks()
-
-		// Mock window.getComputedStyle for color contrast testing
-		Object.defineProperty(window, "getComputedStyle", {
-			writable: true,
-			value: vi.fn().mockImplementation((element) => ({
-				color: "rgb(0, 0, 0)",
-				backgroundColor: "rgb(255, 255, 255)",
-				getPropertyValue: vi.fn().mockReturnValue("")
-			}))
-		})
-
-		// Mock CSS.supports for feature detection
-		Object.defineProperty(CSS, "supports", {
-			writable: true,
-			value: vi.fn().mockReturnValue(true)
-		})
-	})
-
-	afterEach(() => {
-		vi.restoreAllMocks()
-	})
-
-	describe("WCAG Compliance", () => {
-		it("should pass automated accessibility checks", async () => {
-			const { container } = render(<MediaPlayer src="test.mp4" />)
-
-			const results = await mockAxe.run(container)
-			expect(results.violations).toHaveLength(0)
-		})
-
-		it("should have proper ARIA labels and roles", () => {
-			render(<MediaPlayer src="test.mp4" />)
-
-			// Main media player should have appropriate role
-			const mediaContainer = screen.getByRole("application")
-			expect(mediaContainer).toHaveAttribute("aria-label", expect.stringContaining("player"))
-			expect(mediaContainer).toHaveAttribute("role", "application")
-
-			// Controls should have accessible names
-			const playButton = screen.getByRole("button", { name: /play/i })
-			expect(playButton).toHaveAccessibleName()
-
-			const volumeSlider = screen.getByRole("slider", { name: /volume/i })
-			expect(volumeSlider).toHaveAccessibleName()
-
-			const seekBar = screen.getByRole("slider", { name: /seek/i })
-			expect(seekBar).toHaveAccessibleName()
-		})
-
-		it("should provide sufficient color contrast", () => {
-			const { container } = render(<MediaPlayer src="test.mp4" />)
-
-			const contrastViolations = a11yTestUtils.testColorContrast(container)
-			expect(contrastViolations).toHaveLength(0)
-		})
-
-		it("should support keyboard navigation", async () => {
-			const user = userEvent.setup()
-			const { container } = render(<MediaPlayer src="test.mp4" />)
-
-			// Test keyboard navigation
-			const keyboardIssues = a11yTestUtils.testKeyboardNavigation(container)
-			expect(keyboardIssues).toHaveLength(0)
-
-			// Test tab order
-			const mediaContainer = screen.getByRole("application")
-			mediaContainer.focus()
-			expect(document.activeElement).toBe(mediaContainer)
-
-			// Test keyboard shortcuts
-			await user.keyboard(" ") // Space bar for play/pause
-			expect(screen.getByRole("button", { name: /pause/i })).toBeInTheDocument()
-
-			await user.keyboard("m") // Mute/unmute
-			expect(screen.getByRole("button", { name: /unmute/i })).toBeInTheDocument()
-
-			await user.keyboard("ArrowRight") // Seek forward
-			expect(mediaContainer).toHaveFocus()
-		})
-
-		it("should have proper focus management", () => {
-			const { container } = render(<MediaPlayer src="test.mp4" />)
-
-			const focusIssues = a11yTestUtils.testFocusManagement(container)
-			expect(focusIssues).toHaveLength(0)
-
-			// Test focus indicators
-			const playButton = screen.getByRole("button", { name: /play/i })
-			playButton.focus()
-			expect(playButton).toHaveFocus()
-		})
-	})
-
-	describe("Screen Reader Support", () => {
-		it("should announce media state changes", async () => {
-			const user = userEvent.setup()
-			render(<MediaPlayer src="test.mp4" />)
-
-			const playButton = screen.getByRole("button", { name: /play/i })
-
-			// Should announce play state
-			await user.click(playButton)
-
-			const statusRegion = screen.getByRole("status")
-			expect(statusRegion).toBeInTheDocument()
-			expect(statusRegion).toHaveTextContent(/playing/i)
-
-			// Should announce pause state
-			await user.click(playButton)
-			expect(statusRegion).toHaveTextContent(/paused/i)
-		})
-
-		it("should announce errors to screen readers", async () => {
-			render(<MediaPlayer src="invalid.mp4" />)
-
-			// Simulate error
-			const video = screen.getByRole("application") as HTMLVideoElement
-
-			act(() => {
-				video.error = new Error("Media format not supported")
-				const errorEvent = new Event("error")
-				video.dispatchEvent(errorEvent)
-			})
-
-			const errorMessage = screen.getByRole("alert")
-			expect(errorMessage).toBeInTheDocument()
-			expect(errorMessage).toHaveTextContent(/media format not supported/i)
-		})
-
-		it("should provide descriptive labels for controls", () => {
-			render(<MediaPlayer src="test.mp4" showControls={true} />)
-
-			// All controls should have accessible descriptions
-			const controls = screen.getAllByRole("button")
-			controls.forEach((control) => {
-				expect(control).toHaveAccessibleName()
-			})
-
-			// Sliders should have accessible labels and descriptions
-			const sliders = screen.getAllByRole("slider")
-			sliders.forEach((slider) => {
-				expect(slider).toHaveAccessibleName()
-				expect(slider).toHaveAttribute("aria-valuenow")
-				expect(slider).toHaveAttribute("aria-valuemin")
-				expect(slider).toHaveAttribute("aria-valuemax")
-			})
-		})
-
-		it("should announce time progress and duration", async () => {
-			const user = userEvent.setup()
-			render(<MediaPlayer src="test.mp4" />)
-
-			const video = screen.getByRole("application") as HTMLVideoElement
-
-			// Simulate video metadata loading
-			act(() => {
-				video.duration = 120 // 2 minutes
-				video.readyState = 1
-				const loadedMetadataEvent = new Event("loadedmetadata")
-				video.dispatchEvent(loadedMetadataEvent)
-			})
-
-			const timeDisplay = screen.getByTestId("time-display")
-			expect(timeDisplay).toHaveAttribute("aria-live", "polite")
-			expect(timeDisplay).toHaveTextContent(/0:00 \/ 2:00/i)
-
-			// Simulate time update
-			act(() => {
-				video.currentTime = 30
-				const timeUpdateEvent = new Event("timeupdate")
-				video.dispatchEvent(timeUpdateEvent)
-			})
-
-			await waitFor(() => {
-				expect(timeDisplay).toHaveTextContent(/0:30 \/ 2:00/i)
-			})
-		})
-	})
-
-	describe("Keyboard Accessibility", () => {
-		it("should support all keyboard shortcuts", async () => {
-			const user = userEvent.setup()
-			render(<MediaPlayer src="test.mp4" />)
-
-			const mediaContainer = screen.getByRole("application")
-			mediaContainer.focus()
-
-			// Test play/pause (Space)
-			await user.keyboard(" ")
-			expect(screen.getByRole("button", { name: /pause/i })).toBeInTheDocument()
-
-			// Test mute (M)
-			await user.keyboard("m")
-			expect(screen.getByRole("button", { name: /unmute/i })).toBeInTheDocument()
-
-			// Test fullscreen (F)
-			await user.keyboard("f")
-			expect(document.fullscreenElement).toBe(mediaContainer)
-
-			// Test volume controls (Arrow Up/Down)
-			await user.keyboard("{ArrowUp}")
-			const volumeSlider = screen.getByRole("slider", { name: /volume/i })
-			expect(volumeSlider).toHaveValue("1")
-
-			await user.keyboard("{ArrowDown}")
-			expect(volumeSlider).toHaveValue("0.9")
-
-			// Test seeking (Arrow Left/Right)
-			await user.keyboard("{ArrowRight}")
-			const seekBar = screen.getByRole("slider", { name: /seek/i })
-			expect(seekBar).toHaveValueGreaterThan("0")
-		})
-
-		it("should show keyboard help overlay", async () => {
-			const user = userEvent.setup()
-			render(<MediaPlayer src="test.mp4" />)
-
-			// Open keyboard help
-			await user.keyboard("?")
-
-			const helpOverlay = screen.getByRole("dialog", { name: /keyboard shortcuts/i })
-			expect(helpOverlay).toBeInTheDocument()
-
-			// Should list all available shortcuts
-			expect(screen.getByText(/play or pause/i)).toBeInTheDocument()
-			expect(screen.getByText(/mute or unmute/i)).toBeInTheDocument()
-			expect(screen.getByText(/toggle fullscreen/i)).toBeInTheDocument()
-
-			// Should be focusable and closeable
-			const closeButton = screen.getByRole("button", { name: /close/i })
-			expect(closeButton).toBeInTheDocument()
-
-			await user.click(closeButton)
-			expect(helpOverlay).not.toBeInTheDocument()
-		})
-
-		it("should handle focus trapping in modals", async () => {
-			const user = userEvent.setup()
-			render(<MediaPlayer src="test.mp4" />)
-
-			// Open settings modal
-			await user.keyboard("s")
-
-			const settingsModal = screen.getByRole("dialog", { name: /settings/i })
-			expect(settingsModal).toBeInTheDocument()
-
-			// Focus should be trapped within modal
-			const firstFocusable = settingsModal.querySelector(
-				'button, input, select, [tabindex]:not([tabindex="-1"])'
-			)
-			expect(firstFocusable).toHaveFocus()
-
-			// Tab should cycle through modal elements
-			await user.keyboard("{Tab}")
-			expect(settingsModal.contains(document.activeElement || document.body)).toBe(true)
-
-			// Escape should close modal
-			await user.keyboard("{Escape}")
-			expect(settingsModal).not.toBeInTheDocument()
-		})
-
-		it("should support skip links", () => {
-			render(<MediaPlayer src="test.mp4" />)
-
-			const skipLink = screen.getByRole("link", { name: /skip to main content/i })
-			expect(skipLink).toBeInTheDocument()
-
-			// Should be visible on focus
-			skipLink.focus()
-			expect(skipLink).toBeVisible()
-		})
-	})
-
-	describe("Visual Accessibility", () => {
-		it("should respect reduced motion preferences", () => {
-			// Mock reduced motion preference
-			Object.defineProperty(window, "matchMedia", {
-				writable: true,
-				value: vi.fn().mockImplementation((query) => ({
-					matches: query === "(prefers-reduced-motion: reduce)",
-					media: query,
-					onchange: null,
-					addListener: vi.fn(),
-					removeListener: vi.fn(),
-					addEventListener: vi.fn(),
-					removeEventListener: vi.fn(),
-					dispatchEvent: vi.fn()
-				}))
-			})
-
-			const { container } = render(<MediaPlayer src="test.mp4" />)
-
-			// Animations should be disabled
-			const animatedElements = container.querySelectorAll(
-				'[class*="animate-"], [class*="transition-"]'
-			)
-			animatedElements.forEach((element) => {
-				const styles = window.getComputedStyle(element)
-				expect(styles.animation).toBe("none")
-				expect(styles.transition).toBe("none")
-			})
-		})
-
-		it("should support high contrast mode", () => {
-			// Mock high contrast mode
-			Object.defineProperty(window, "matchMedia", {
-				writable: true,
-				value: vi.fn().mockImplementation((query) => ({
-					matches: query === "(prefers-contrast: high)",
-					media: query,
-					onchange: null,
-					addListener: vi.fn(),
-					removeListener: vi.fn(),
-					addEventListener: vi.fn(),
-					removeEventListener: vi.fn(),
-					dispatchEvent: vi.fn()
-				}))
-			})
-
-			render(<MediaPlayer src="test.mp4" />)
-
-			// Should apply high contrast styles
-			const mediaContainer = screen.getByRole("application")
-			expect(mediaContainer).toHaveClass("high-contrast")
-		})
-
-		it("should have sufficient tap targets for touch devices", () => {
-			// Mock touch device
-			Object.defineProperty(navigator, "maxTouchPoints", {
-				writable: true,
-				value: 1
-			})
-
-			const { container } = render(<MediaPlayer src="test.mp4" />)
-
-			// All interactive elements should have sufficient touch target size
-			const interactiveElements = container.querySelectorAll('button, [role="slider"]')
-			interactiveElements.forEach((element) => {
-				const styles = window.getComputedStyle(element)
-				const width = parseInt(styles.width)
-				const height = parseInt(styles.height)
-
-				// Should be at least 44x44 pixels
-				expect(width).toBeGreaterThanOrEqual(44)
-				expect(height).toBeGreaterThanOrEqual(44)
-			})
-		})
-
-		it("should maintain readability at different zoom levels", () => {
-			// Mock different zoom levels
-			const zoomLevels = [1, 1.5, 2]
-
-			zoomLevels.forEach((zoom) => {
-				Object.defineProperty(document.body.style, "zoom", {
-					writable: true,
-					value: zoom
-				})
-
-				const { container } = render(<MediaPlayer src="test.mp4" />)
-
-				// Text should remain readable
-				const textElements = container.querySelectorAll(
-					'button span, [role="status"], .time-display'
-				)
-				textElements.forEach((element) => {
-					const styles = window.getComputedStyle(element)
-					const fontSize = parseInt(styles.fontSize)
-					expect(fontSize).toBeGreaterThanOrEqual(14) // Minimum readable font size
-				})
-			})
-		})
-	})
-
-	describe("Cognitive Accessibility", () => {
-		it("should provide clear error messages", async () => {
-			render(<MediaPlayer src="invalid.mp4" />)
-
-			const video = screen.getByRole("application") as HTMLVideoElement
-
-			act(() => {
-				video.error = new Error("Network error - unable to load media")
-				const errorEvent = new Event("error")
-				video.dispatchEvent(errorEvent)
-			})
-
-			const errorMessage = screen.getByRole("alert")
-			expect(errorMessage).toBeInTheDocument()
-
-			// Error message should be clear and actionable
-			expect(errorMessage).toHaveTextContent(/network error/i)
-			expect(errorMessage).toHaveTextContent(/unable to load media/i)
-
-			// Should provide recovery options
-			const retryButton = screen.getByRole("button", { name: /try again/i })
-			expect(retryButton).toBeInTheDocument()
-		})
-
-		it("should provide clear status indicators", async () => {
-			const user = userEvent.setup()
-			render(<MediaPlayer src="test.mp4" />)
-
-			// Should show loading status
-			expect(screen.getByRole("status")).toHaveTextContent(/ready/i)
-
-			// Should show playing status
-			const playButton = screen.getByRole("button", { name: /play/i })
-			await user.click(playButton)
-
-			await waitFor(() => {
-				expect(screen.getByRole("status")).toHaveTextContent(/playing/i)
-			})
-
-			// Should show buffering status
-			const video = screen.getByRole("application") as HTMLVideoElement
-			act(() => {
-				const waitingEvent = new Event("waiting")
-				video.dispatchEvent(waitingEvent)
-			})
-
-			await waitFor(() => {
-				expect(screen.getByRole("status")).toHaveTextContent(/buffering/i)
-			})
-		})
-
-		it("should use consistent navigation patterns", async () => {
-			const user = userEvent.setup()
-			render(<MediaPlayer src="test.mp4" />)
-
-			// Controls should be in consistent order
-			const controls = screen.getAllByRole("button")
-			const playButton = controls.find((btn) => btn.getAttribute("aria-label")?.includes("play"))
-			const volumeButton = controls.find((btn) =>
-				btn.getAttribute("aria-label")?.includes("volume")
-			)
-			const fullscreenButton = controls.find((btn) =>
-				btn.getAttribute("aria-label")?.includes("fullscreen")
-			)
-
-			expect(playButton).toBeInTheDocument()
-			expect(volumeButton).toBeInTheDocument()
-			expect(fullscreenButton).toBeInTheDocument()
-
-			// Tab order should be logical
-			playButton?.focus()
-			expect(playButton).toHaveFocus()
-
-			await user.keyboard("{Tab}")
-			expect(volumeButton).toHaveFocus()
-
-			await user.keyboard("{Tab}")
-			expect(fullscreenButton).toHaveFocus()
-		})
-
-		it("should provide help and instructions", () => {
-			render(<MediaPlayer src="test.mp4" />)
-
-			// Should have help button
-			const helpButton = screen.getByRole("button", { name: /help/i })
-			expect(helpButton).toBeInTheDocument()
-
-			// Should have keyboard shortcut indicator
-			const shortcutsIndicator = screen.getByText(/press \? for keyboard shortcuts/i)
-			expect(shortcutsIndicator).toBeInTheDocument()
-		})
-	})
-
-	describe("Accessibility Testing Utilities", () => {
-		it("should validate ARIA attributes correctly", () => {
-			const { container } = render(<MediaPlayer src="test.mp4" />)
-
-			const ariaViolations = a11yTestUtils.testAriaAttributes(container)
-			expect(ariaViolations).toHaveLength(0)
-		})
-
-		it("should validate keyboard navigation correctly", async () => {
-			const { container } = render(<MediaPlayer src="test.mp4" />)
-
-			const keyboardIssues = a11yTestUtils.testKeyboardNavigation(container)
-			expect(keyboardIssues).toHaveLength(0)
-		})
-
-		it("should detect screen reader announcements", () => {
-			const { container } = render(<MediaPlayer src="test.mp4" />)
-
-			const announcements = a11yTestUtils.testScreenReaderAnnouncements(container)
-			expect(announcements).toBeInstanceOf(Array)
-		})
-	})
-})