# Fix Animated Focus Bugs

CSS animations can make floating UI content reject focus before keyboard handlers are ready. This skill guides Claude, Codex, and Claude Code through a retry-based focus pattern and matching tests.

## Install

```bash
npx skillstore add andrehogberg/animated-focus
```

## Metadata

- - Slug: andrehogberg-animated-focus
- - Version: 1.0.0
- - Author: AndreHogberg
- - GitHub username: AndreHogberg
- - License: MIT
- - Repository: https://github.com/AndreHogberg/summit-ui/tree/main/.claude/skills/animated-focus
- - Ref: main
- - Supported tools: Claude, Codex, Claude Code
- - Risk level: low
- - Risk factors: external\_commands
- - Quality score: 79
- - Quality tier: bronze
- - Public page: https://skillstore.pages.dev/skills/andrehogberg-animated-focus
- - Manifest: https://skillstore.pages.dev/api/skills/andrehogberg-animated-focus/manifest

## Capabilities

- Explains why opacity-based opening animations can block immediate focus calls.
- Provides a retry strategy using animation frame timing and bounded delayed focus attempts.
- Identifies affected floating components such as Select, DropdownMenu, and Popover.
- Lists practical Playwright test scenarios for animated keyboard navigation.
- Compares alternative approaches and explains why the retry mechanism was chosen.

## Use Cases

- Repair Animated Menus: Debug menus that open visually but ignore arrow keys or Escape after a keyboard trigger.
- Strengthen Accessibility Tests: Add focused tests that verify keyboard behavior when CSS open and close animations are present.
- Review Component Focus Design: Evaluate whether floating components move focus at the correct time during animated rendering.

## Prompt Templates

### Diagnose a Focus Bug

```
Use animated-focus to explain why my floating component opens but keyboard navigation does not work when fade-in animation is enabled.
```

### Apply the Retry Pattern

```
Use animated-focus to adapt my focus helper so it waits for CSS animation timing and retries focus safely.
```

### Plan Keyboard Tests

```
Use animated-focus to design Playwright tests for animated Select, DropdownMenu, and Popover keyboard behavior.
```

### Audit a Design System

```
Use animated-focus to review my design system focus management and identify components that need animation-aware focus timing.
```

## Limitations

- It is a guidance document, not a packaged library or runnable plugin.
- Examples are tailored to Summit UI component names and file paths.
- It does not cover every browser focus edge case or assistive technology behavior.
- It assumes the component can safely retry focus after rendering.

## Best Practices

- Verify focus by checking the active element after each focus attempt.
- Keep retry attempts bounded so failed focus does not loop indefinitely.
- Test keyboard behavior with the same animation classes used in production.

## Anti Patterns

- Do not assume visual opening means the browser accepted focus.
- Do not remove keyboard tests when animation-only failures are hard to reproduce.
- Do not use long fixed delays when short verified retries can resolve timing faster.

## Security Audit

- - Safe to publish: true
- - Audited at: 2026-06-28T08:47:33.281\+00:00
- - Summary: Static analysis flagged many Ruby or shell backtick patterns and one weak cryptography pattern. Review found the backticks are Markdown inline code, fenced JavaScript, CSS, and bash examples, and the cryptography alert is not supported by the frontmatter text at SKILL.md:3. No prompt injection, network access, secret access, or executable skill scripts were found in the reviewed file.

## Stats

- - Views: 216
- - Downloads: 6
- - Favorites: 0
- - Popularity score: 0