🎯

animated-focus

Name: animated-focus
Author: AndreHogberg

Seguro 🌐 Acesso à rede📁 Acesso ao sistema de arquivos⚙️ Comandos externos

Corrigir o Foco do Teclado com Animações CSS

Componentes de UI animados podem quebrar a navegação por teclado quando os navegadores rejeitam chamadas de foco em elementos invisíveis. Esta skill fornece um padrão de mecanismo de repetição que garante que o foco seja aplicado após a conclusão das animações CSS, tornando os componentes animados totalmente acessíveis.

Suporta: Claude Codex Code(CC)

📊 71 Adequado

Baixar o ZIP da skill

Upload no Claude

Vá em Configurações → Capacidades → Skills → Upload skill

Ative e comece a usar

Testar

A utilizar "animated-focus". My animated popover doesn't focus after opening with keyboard

Resultado esperado:

Causa raiz: animações CSS começam em opacity:0, o navegador rejeita foco em elementos invisíveis
Solução: usar requestAnimationFrame + loop de repetição com verificação de document.activeElement
Implementação: focusElement() com 5 tentativas em intervalos de 20ms (100ms máx.)
Padrão de código chave: requestAnimationFrame(() => tryFocus(5))
Teste com: testes Playwright verificando abrir/fechar animado/navegação/fechar com Escape

A utilizar "animated-focus". How do I test that keyboard navigation works on my animated Select component?

Resultado esperado:

Criar teste Playwright: AnimatedSelect_ShouldOpen_OnEnterKey
Criar teste: AnimatedSelect_ShouldNavigate_WithArrowKeys
Criar teste: AnimatedSelect_ShouldSelect_OnEnterKey
Criar teste: AnimatedSelect_ShouldClose_OnEscape
Rodar testes com: dotnet run --project tests/SummitUI.Tests.Playwright -- --treenode-filter '/*/*/*/Animated*'

Auditoria de Segurança

Seguro

v5 • 1/16/2026

This skill is documentation-only (SKILL.md) containing no executable code. All 43 static findings are false positives: backtick characters are markdown code formatting syntax, not shell execution; metadata URL and filesystem fields are configuration, not operations; no cryptographic algorithms or actual code exist in this content.

Arquivos analisados

345

Linhas analisadas

achados

Total de auditorias

Fatores de risco

🌐 Acesso à rede (1)

skill-report.json:6

📁 Acesso ao sistema de arquivos (1)

skill-report.json:6

⚙️ Comandos externos (34)

Auditado por: claude Ver Histórico de Auditoria →

Pontuação de qualidade

Arquitetura

100

Manutenibilidade

Conteúdo

Comunidade

100

Segurança

Conformidade com especificações

O Que Você Pode Construir

Corrigir Componentes Select Animados

Habilitar navegação por teclado em componentes de seleção em dropdown animados que falham ao abrir com as teclas de seta

Testar Foco com Animações

Verificar que componentes de UI animados atendem aos requisitos de gerenciamento de foco da WCAG usando testes Playwright

Implementar Componentes Flutuantes

Construir componentes flutuantes acessíveis (Popover, DropdownMenu) com animações CSS de abrir/fechar

Tente Estes Prompts

Diagnosticar Problema de Foco

Meu componente de dropdown abre com o mouse, mas a navegação por teclado falha quando adiciono classes de animação. As teclas de seta não funcionam após abrir. Como corrigir o foco com animações CSS?

Implementar Lógica de Repetição

Preciso implementar uma função focusElement com mecanismo de repetição para componentes animados. Mostre o código JavaScript usando requestAnimationFrame e setTimeout com atrasos de 20ms.

Escrever Testes de Acessibilidade

Escreva testes Playwright para verificar que a navegação por teclado funciona nos componentes Select, DropdownMenu e Popover animados. Inclua testes para abrir com a tecla Enter, navegação com setas e fechar com a tecla Escape.

Aplicar a Componentes Blazor

Mostre como integrar o mecanismo de repetição de foco em componentes Blazor. Quais alterações são necessárias em SelectContent.cs, DropdownMenuContent.cs e PopoverContent.cs?

Melhores Práticas

Usar requestAnimationFrame antes de tentar o foco para garantir que o CSS foi aplicado
Verificar o sucesso do foco conferindo document.activeElement em relação ao elemento alvo
Limitar as tentativas para evitar loops infinitos (5 tentativas em 20ms = 100ms máx.)
Aplicar a repetição de foco a todas as funções de foco (focusElement e focusElementById)

Evitar

Chamar focus() imediatamente sem esperar o avanço da animação CSS
Não verificar document.activeElement para confirmar que o foco realmente funcionou
Usar atrasos fixos sem requestAnimationFrame (pode não alinhar com a renderização CSS)
Aplicar repetição de foco apenas a alguns componentes enquanto outros permanecem quebrados

Perguntas Frequentes

O que causa a falha da navegação por teclado com animações CSS?

Animações que começam em opacity:0 tornam os elementos invisíveis. Navegadores rejeitam chamadas focus() em elementos invisíveis, fazendo o foco permanecer no gatilho.

Quanto tempo devem ser os atrasos de repetição?

Use intervalos de 20ms com 5 tentativas (100ms no total). Isso permite que a maioria das animações avance além de opacity:0 sem adicionar atraso perceptível.

Isso funciona com todos os tipos de animação?

Sim. O mecanismo de repetição funciona com qualquer duração de animação porque verifica o sucesso real do foco em vez de usar atrasos fixos.

Os dados do usuário são coletados ou transmitidos?

Não. Esta skill somente de documentação não contém código que acesse, colete ou transmita dados do usuário.

Por que verificar document.activeElement em vez do valor de retorno de focus()?

focus() retorna true/false de forma inconsistente entre navegadores. Verificar document.activeElement confirma de forma confiável que o foco foi movido para o elemento alvo.

Como isso se compara a outras bibliotecas de UI?

Esse padrão é semelhante à forma como bits-ui lida com presença animada no Svelte. O mecanismo de repetição é uma abordagem geral que funciona em diferentes frameworks.

Detalhes do Desenvolvedor

Autor

AndreHogberg

Licença

MIT

Repositório

https://github.com/AndreHogberg/summit-ui/tree/main/.claude/skills/animated-focus

Referência

main

Estrutura de arquivos

📄 SKILL.md