Toolbar
Beta

FocusTrap

A directive that traps keyboard focus within a container, ensuring proper accessibility for modals, forms, and other interactive elements that require contained navigation.

Import

import {FktFocusTrapDirective} from "frakton-ng/focus-trap";

Basic

Basic focus trap implementation confining keyboard navigation to a specific area.


  
Try tabbing through the elements below. Focus will be trapped within the container.

  
  

    
Focus Trap Demo

    
This container traps focus. Use Tab and Shift+Tab to navigate.

    
    
    
    
  

  
  
This content is outside the focus trap and won't be reachable via Tab navigation.

Focus trap used in modal dialogs to ensure proper keyboard accessibility.


  

    Click the button below to open a dialog using FktDialogService.
    The Frakton Dialog component automatically includes focus trap functionality.
  


  

  

    
About Frakton Dialogs

    

      The FktDialogService automatically implements focus trap using the same
      fktFocusTrap directive demonstrated in other examples. This ensures:
    

    
    
      
  • Focus is trapped within the dialog content
    • 
      
  • Tab navigation cycles within the dialog
    • 
      
  • Accessibility guidelines are followed
    • 
      
  • No additional setup required
    • 
    

  


  
This content remains accessible when no dialog is open.

Form

Focus trap applied to form elements for sequential keyboard navigation.


    
This form demonstrates focus trap with various form controls. Tab navigation is contained
        within the form.


    

        
Registration Form

        
All form controls are included in the focus trap cycle.


        

            
                
            
            
                
            
        


        
            
        

        
            
        

        

        

        

        

      
            
        

    

    
Elements outside the form are not accessible via keyboard navigation when focus is
        trapped.

FocusTrap

Key Features

  • Automatic Focus Management: Automatically focuses the first focusable element when applied
  • Tab Cycling: Tab and Shift+Tab navigation cycles within the trapped container
  • Scroll Prevention: Optional prevention of page scrolling when focusing elements
  • Accessibility Compliant: Follows WCAG guidelines for focus management
  • Framework Integration: Works seamlessly with Angular's component architecture

Configuration Options

Usage

import {FktFocusTrapDirective} from 'frakton-ng/focus-trap';


<div fktFocusTrap aria-label="Trapped focus example" role="group">
    <button>First button (tabbable)</button>

    <a href="#">Anchor link (tabbable)</a>

    <input type="text" placeholder="Input field (tabbable)"/>

    <select>
        <option>Select an option</option>
        <option>Option 1</option>
        <option>Option 2</option>
    </select>

    <textarea placeholder="Textarea (tabbable)"></textarea>

    <div tabindex="0">Focusable div (tabbable via Tab)</div>

    <button tabindex="-1">Non-tabbable button (will be skipped)</button>

    <div>Plain div (not tabbable, not focusable)</div>
</div>

Integration with Frakton Components

FktDialogService

The FktDialogService automatically implements focus trap functionality using this directive. When you use the dialog service, focus management is handled automatically:

import {FktDialogService} from 'frakton-ng/dialog';

// Focus trap is automatically applied - no additional setup needed
const dialogRef = this.dialogService.open({
    component: MyDialogComponent,
    data: { /* ... */}
});

Other Frakton Components

Several other Frakton components use this directive internally:

  • FktOverlayService - For popover and dropdown focus management
  • FktSelectOptionsComponent - For dropdown option navigation
  • Modal Components - Any component that creates overlay content

Use Cases

  • Modal Dialogs - Ensure users can only interact with modal content when open
  • Dropdown Menus - Trap focus within complex dropdown interfaces
  • Form Sections - Guide users through multi-step form processes
  • Sidebar Navigation - Contain keyboard navigation within slide-out menus
  • Popover Content - Manage focus for overlay content and tooltips
  • Custom Overlays - Any custom overlay or popup component

Implementation Details

How It Works

  1. Initialization: When the directive is applied, it scans for all focusable elements within the container
  2. Auto Focus: Automatically focuses the first focusable element after a brief delay (100ms)
  3. Tab Handling: Intercepts Tab and Shift+Tab keypress events
  4. Cycle Management: When reaching the last element, Tab moves to the first; when reaching the first element, Shift+Tab moves to the last
  5. Element Detection: Uses standard focusable element selectors (buttons, inputs, links, etc.)

Focusable Elements

The directive automatically detects these focusable elements:

  • <button> elements
  • <input> elements (not disabled)
  • <select> elements
  • <textarea> elements
  • <a> elements with href
  • Elements with tabindex="0" or positive tabindex
  • Custom components that implement proper focus management

Browser Support

  • Modern browsers with full keyboard navigation support
  • Screen reader compatible
  • High contrast mode compatible

Accessibility

  • WCAG 2.1 Compliance: Follows Web Content Accessibility Guidelines
  • Screen Reader Support: Works with all major screen reading software
  • Keyboard Navigation: Full keyboard accessibility without mouse dependency
  • Focus Indicators: Preserves browser and custom focus styling
  • Escape Patterns: Can be combined with escape key handling for modal closure

Best Practices

  1. Always provide escape mechanisms for modal dialogs (ESC key, close button)
  2. Use with proper ARIA labels and roles for screen reader context
  3. Test with keyboard-only navigation to ensure proper user experience
  4. Consider initial focus placement - focus the most important or first interactive element
  5. Combine with backdrop click handling for modal dialogs

Performance Notes

  • Minimal performance impact - only scans for focusable elements on initialization
  • Efficient event handling - only listens for Tab key events
  • No continuous DOM monitoring - static analysis of focusable elements