{
    "slug": "focus_management",
    "term": "Focus Management",
    "category": "accessibility",
    "difficulty": "intermediate",
    "short": "Programmatically controlling keyboard focus in SPAs and complex UIs — ensuring focus moves logically when modals open, routes change, and dynamic content loads.",
    "long": "In static pages, browser focus follows natural tab order. In SPAs and dynamic UIs, focus management is the developer's responsibility. Key scenarios: modal opens (move focus to first interactive element), modal closes (return focus to trigger), route changes (move focus to main heading or skip-nav), inline errors appear (move focus to error summary), and notifications appear (announce via aria-live, not focus). Focus trapping in modals prevents tab from escaping into background content.",
    "aliases": [
        "focus trap",
        "focus restoration",
        "focus management"
    ],
    "tags": [
        "accessibility",
        "spa",
        "javascript",
        "frontend"
    ],
    "misconception": "Calling element.focus() is sufficient for SPA route changes — focus must move to meaningful content (h1 or main), not just any element; additionally, the page title should update for screen reader context.",
    "why_it_matters": "In a SPA without focus management, route changes leave keyboard users disoriented — focus remains on the navigation link while new content loads elsewhere on the page.",
    "common_mistakes": [
        "Not trapping focus in modals — Tab key escapes the modal into background content, making the modal unusable for keyboard users.",
        "Removing focus from modals on close without returning it to the trigger — users lose their place in the page.",
        "Using tabindex='-1' on the target element but not calling .focus() — the element is focusable programmatically but .focus() must be called.",
        "Focusing a non-interactive container div — focus must land on an element with a meaningful accessible name."
    ],
    "when_to_use": [],
    "avoid_when": [],
    "related": [
        "keyboard_navigation",
        "wcag_guidelines",
        "aria_live_regions"
    ],
    "prerequisites": [
        "keyboard_navigation",
        "accessibility_aria",
        "html_accessibility"
    ],
    "refs": [
        "https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/"
    ],
    "bad_code": "// Modal without focus management:\nfunction openModal() {\n    document.getElementById('modal').style.display = 'block';\n    // Focus stays on the button that opened the modal\n    // Keyboard users cannot navigate inside the modal\n    // Tab escapes to the page behind the modal\n}",
    "good_code": "// Modal with proper focus management:\nfunction openModal(trigger) {\n    const modal = document.getElementById('modal');\n    modal.style.display = 'block';\n    modal.setAttribute('aria-modal', 'true');\n    // Move focus to first focusable element:\n    modal.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"])').focus();\n    // Trap focus inside modal:\n    modal.addEventListener('keydown', trapFocus);\n}\nfunction closeModal() {\n    document.getElementById('modal').style.display = 'none';\n    trigger.focus(); // Return focus to the element that opened the modal\n}",
    "quick_fix": "After any dynamic content change (modal open, page route change, error message), programmatically move focus to the new content using .focus() on the container with tabindex='-1'",
    "severity": "high",
    "effort": "medium",
    "created": "2026-03-15",
    "updated": "2026-03-22",
    "citation": {
        "canonical_url": "https://codeclaritylab.com/glossary/focus_management",
        "html_url": "https://codeclaritylab.com/glossary/focus_management",
        "json_url": "https://codeclaritylab.com/glossary/focus_management.json",
        "source": "CodeClarityLab Glossary",
        "author": "P.F.",
        "author_url": "https://pfmedia.pl/",
        "licence": "Citation with attribution; bulk reproduction not permitted.",
        "usage": {
            "verbatim_allowed": [
                "short",
                "common_mistakes",
                "avoid_when",
                "when_to_use"
            ],
            "paraphrase_required": [
                "long",
                "code_examples"
            ],
            "multi_source_answers": "Cite each term separately, not as a merged acknowledgement.",
            "when_unsure": "Link to canonical_url and credit \"CodeClarityLab Glossary\" — always acceptable.",
            "attribution_examples": {
                "inline_mention": "According to CodeClarityLab: <quote>",
                "markdown_link": "[Focus Management](https://codeclaritylab.com/glossary/focus_management) (CodeClarityLab)",
                "footer_credit": "Source: CodeClarityLab Glossary — https://codeclaritylab.com/glossary/focus_management"
            }
        }
    }
}