--- name: focus-management description: Keyboard focus management patterns for accessibility. Covers focus traps, roving tabindex, focus restore, skip links, and FocusScope components for WCAG-compliant interactive widgets. Use when implementing focus traps or keyboard navigation. context: fork agent: accessibility-specialist version: 1.0.0 tags: [accessibility, focus, keyboard, a11y, trap] allowed-tools: [Read, Write, Edit, Grep, Glob] author: OrchestKit user-invocable: false --- # Focus Management Essential patterns for managing keyboard focus in accessible web applications, ensuring keyboard-only users can navigate complex interactive components. ## Overview - Building modals, dialogs, or drawers that require focus trapping - Implementing tab panels, menus, or toolbars with roving tabindex - Restoring focus after closing overlays or completing actions - Creating skip links for keyboard navigation - Ensuring focus visibility meets WCAG 2.4.7 requirements ## Quick Reference ### FocusScope Trap (React Aria) ```tsx import { FocusTrap } from '@react-aria\/focus'; function Modal({ isOpen, onClose, children }) { if (!isOpen) return null; return (