Hero Video Dialog

Notas de acessibilidade

Teclado e leitor de tela verificados por teste (Vitest) e em navegador (tests/e2e/hero-video-dialog.spec.ts, Chromium desktop e mobile, light e dark). A miniatura é um `<button>` real dentro do DialogTrigger: Tab a alcança, Enter e Espaço abrem o player, o foco entra no overlay e volta para ela ao fechar. Fecha por Escape, pelo botão de fechar e por clique fora — o Dialog é dono de todos os três. O overlay é nomeado pelo `thumbnailAlt` através de um DialogTitle sr-only, então o leitor de tela anuncia de que vídeo se trata em vez de “dialog”; o iframe declara `title`. Axe sem violações WCAG 2.2 AA com o player aberto, em light e dark. Toque verificado em viewport de 375px com emulação de toque: a miniatura ocupa a largura toda e o botão de fechar mede 36x36, acima do mínimo de 24x24 da WCAG 2.2 SC 2.5.8; abrir e fechar funcionam por toque e a página não rola horizontalmente. Reduced motion verificado em navegador com prefers-reduced-motion: reduce e por teste: o movimento é animado em JavaScript pelo `motion/react`, então `motion-safe:` não o alcança — a política é `useReducedMotion()`, que troca as oito curvas por uma transição só de opacidade e zera a duração da mola, e o `scale` de hover da miniatura é desligado por `motion-reduce:`. O caminho de saída continua existindo nos dois modos: o Dialog só desmonta depois que a animação termina, e com duração zero ela termina imediatamente.