Focus Trap

Overview

The Focus Trap directive is a utility that helps manage keyboard focus within a specific DOM element. It ensures that keyboard navigation (using Tab and Shift+Tab) remains within the boundaries of the element, preventing focus from escaping to other parts of the page. This is particularly useful for modal dialogs, drawers, and other UI components that need to maintain focus within their boundaries.

Features

Automatically traps focus within the element
Handles Tab and Shift+Tab navigation
Works with all focusable elements (buttons, inputs, links, etc.)
Automatically updates when focusable elements are added or removed
Perfect for modal dialogs, drawers, and other UI components

Usage

To use the Focus Trap directive, simply add the axFocusTrap attribute to any container element. The directive will automatically handle focus management within that container.

Basic Example (HTML)

With Modal/Drawer (HTML)

Usage in Component (TypeScript)

Best Practices

Use focus trap for modal dialogs and drawers to ensure proper accessibility
Combine with backdrop click handling for better user experience
Ensure there is at least one focusable element within the trap
Consider adding a close button that can be focused
Test keyboard navigation thoroughly in your implementation