@therealtinhtute/baroiplayer 1.0.7 → 1.1.0

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

@@ -0,0 +1,510 @@
+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)
+		})
+	})
+})