focus-trap-lite

Lightweight (≤2kB) focus trapping utility for implementing accessible keyboard navigation constraints in modal dialogs, sidebars, and other contained UI components.

Features

• ✅ Full WAI-ARIA compliance for accessibility
• ✅ Tiny footprint (ES6 module)
• ✅ Zero dependencies
• ✅ Flexible focus control
• ✅ Automatic cleanup
• ✅ TypeScript support

Installation

npm install focus-trap-lite

Usage

Basic Implementation

import { initFocusTrap } from 'focus-trap-lite'

// Initialize trap on modal open
function openModal() {
  initFocusTrap(modalElement, '.focusable')
  // Add your modal opening logic
}

// Trap automatically cleans up when:
// - User closes modal
// - Focus escapes trap boundaries
// - Component unmounts

Advanced Configuration

// Container element with custom selector
initFocusTrap(document.querySelector('#modal-container'), '.custom-focusable')

// Custom selector for focusable elements
initFocusTrap(null, '#modal .focusable')

// Container element with default selector
initFocusTrap(document.querySelector('.sidebar'))

// Default selector includes standard focusable elements:
// 'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'

API

initFocusTrap(container?, selector?)

Behavior:

• Creates keyboard navigation constraints
• Handles boundary focus wrapping
• Automatic cleanup triggers:
  • When trapped container is removed from DOM
  • When calling function returns
  • On Escape key press
• Dynamic element support
• Focus restoration
• ARIA role management

Browser Support

Modern browsers with ES6 support:

Chrome	Firefox	Safari
88+	78+	14.1+

For legacy browser support, add Array.prototype.at() polyfill.

Contributing

1. Fork the repository
2. Clone your fork

git clone https://github.com/your-username/focus-trap-lite.git

3. Install dependencies

npm install

4. Create feature branch

git checkout -b feature/your-feature

5. Commit changes
6. Push to branch
7. Create Pull Request

License

MIT © Pipecraft

📝 Report issues on GitHub

>_