Receber por email
← Voltar para o catálogo

animated-focus

Este documento registra os aprendizados da correção de problemas de navegação por teclado quando componentes flutuantes (Select, DropdownMenu, Popover) possuem animações CSS de abrir/fechar.

2estrelas
Atualizado há 4 meses

Ver no GitHub ↗

Como adicionar

/plugin marketplace add bg-szy/TOP-SKILLS

O comando exato pode variar conforme o repositório. Confira o README no GitHub.

Para o autor da skill

Cole no README do seu repo

Mostra que sua skill está catalogada na Skillteca, gera backlink e tráfego rastreável.

[![Skillteca](https://www.skillteca.com.br/api/badge/animated-focus-bg-szy/svg)](https://www.skillteca.com.br/skills/animated-focus-bg-szy)

Alerta por categoria

Receba novas skills de Design e Frontend toda segunda

1 email curto, só com as skills novas de Design e Frontend. 4 minutos de leitura, sem spam, cancela com 1 clique.

Você confirma o email no primeiro envio. Sem spam. Cancela com 1 clique.

Ler descrição completa

Focus Management with CSS Animations

This document captures learnings from fixing keyboard navigation issues when floating components (Select, DropdownMenu, Popover) have CSS open/close animations.

The Problem

When floating content elements have CSS animations that start at opacity: 0 (like Tailwind's animate-in fade-in-0), the browser may reject element.focus() calls because the element is invisible.

Symptoms

  • Component opens correctly with mouse clicks
  • Keyboard navigatio

[Description truncada. Veja o README completo no GitHub.]

Compartilhar X LinkedIn