Managing Focus Trapping: focus-lock vs react-focus-lock vs react-focus-trap

Focus trapping is non-negotiable for accessible modals, drawers, and dialogs. Without it, keyboard users can tab out of a modal and get lost in the background page — a serious accessibility violation. The three packages under review solve this problem, but their approaches reflect different philosophies about abstraction, framework integration, and developer control.

🧱 Core Architecture: Framework-Agnostic vs React-Centric

focus-lock is a pure DOM utility. It operates on real DOM nodes and has no knowledge of React, Vue, or any framework. You pass it an element reference, and it manages focus within that subtree.

// focus-lock: vanilla JS usage
import { activateFocusTrap, deactivateFocusTrap } from 'focus-lock';

const modal = document.getElementById('my-modal');
const { pause, unpause } = activateFocusTrap(modal);

// Later, to release focus
unpause(); // actually deactivates; naming is historical

react-focus-lock is a React component that wraps your content and automatically manages focus trapping based on its mount/unmount state. It uses React refs and effects internally but exposes a clean JSX API.

// react-focus-lock: React component
import { FocusLock } from 'react-focus-lock';

function Modal({ isOpen }) {
  if (!isOpen) return null;
  return (
    <FocusLock>
      <div role="dialog" aria-modal="true">
        <p>Trapped content</p>
        <button>Close</button>
      </div>
    </FocusLock>
  );
}

react-focus-trap also provides a React component, but with a simpler internal model. It relies on basic useEffect hooks and doesn’t include advanced features like inert simulation or focus persistence across re-renders.

// react-focus-trap: minimal React wrapper
import FocusTrap from 'react-focus-trap';

function Modal({ isOpen }) {
  if (!isOpen) return null;
  return (
    <FocusTrap>
      <div role="dialog" aria-modal="true">
        <p>Trapped content</p>
        <button>Close</button>
      </div>
    </FocusTrap>
  );
}

⚙️ Configuration and Edge Case Handling

focus-lock gives you low-level control. You can specify which elements are focusable, define fallback focus targets, and manually pause/resume trapping. But you must handle all edge cases yourself — like what happens if the trapped element is removed from the DOM.

// focus-lock: custom focusable filter
activateFocusTrap(modal, {
  filter: (el) => !el.disabled && el.tabIndex !== -1
});

react-focus-lock includes built-in solutions for common pitfalls:

• Return focus: Automatically returns focus to the triggering element when unmounted.
• Inert simulation: Hides non-trapped content from assistive tech using aria-hidden.
• Focus guards: Inserts invisible elements before/after the trap to catch rogue focus jumps.
• Shards: Allows multiple disjointed DOM regions to act as one focus trap (e.g., modal + tooltip).

// react-focus-lock: advanced config
<FocusLock
  returnFocus={true}
  autoFocus={true}
  shards={[tooltipRef]}
  as="div"
  className="modal-wrapper"
>
  {/* content */}
</FocusLock>

react-focus-trap offers only basic props like active and focusTrapOptions, but doesn’t support shards, inert behavior, or fine-grained focus control. It assumes a simple, self-contained modal.

// react-focus-trap: limited options
<FocusTrap active={isOpen}>
  <div>{/* modal content */}</div>
</FocusTrap>

🔄 React Integration Depth

react-focus-lock is deeply integrated with React’s concurrency model. It uses layout effects to ensure focus is trapped before paint, and it correctly handles concurrent renders and transitions. It also plays well with React Portals — a common pattern for modals.

react-focus-trap uses standard useEffect, which may lead to brief focus leaks during rapid open/close cycles or in concurrent mode. It works with portals but doesn’t have special handling for them.

focus-lock doesn’t care about React at all. If you use it inside a React app, you’ll need to manage refs and effect cleanup manually:

// Using focus-lock in React (not recommended unless necessary)
import { useEffect, useRef } from 'react';
import { activateFocusTrap } from 'focus-lock';

function Modal() {
  const modalRef = useRef(null);
  useEffect(() => {
    const { unpause } = activateFocusTrap(modalRef.current);
    return () => unpause();
  }, []);

  return <div ref={modalRef}>...</div>;
}

🛑 Maintenance and Deprecation Status

As of the latest verified package metadata:

• focus-lock is actively maintained and serves as the underlying engine for react-focus-lock.
• react-focus-lock is the recommended React solution from the same author and is under active development.
• react-focus-trap is still published and functional, but its GitHub repository shows significantly less recent activity compared to the other two. It is not deprecated, but it hasn’t kept pace with newer accessibility requirements like inert polyfills or complex focus management scenarios.

🆚 When to Use Which

💡 Final Recommendation

For new React projects, react-focus-lock is the clear choice. It’s battle-tested, accessible-by-default, and handles the messy reality of focus management in dynamic UIs. Use focus-lock only if you’re outside the React ecosystem or need to integrate focus trapping into a framework-agnostic design system. Avoid react-focus-trap for anything beyond trivial use cases — its simplicity comes at the cost of robustness in real-world applications where accessibility cannot be compromised.