focus-lock

Focus trapping within a DOM element

This feature allows developers to create a focus trap around a specified DOM element. When activated, all tab and shift+tab keystrokes are confined within the element, enhancing accessibility for modal dialogs.

import { FocusTrap } from 'focus-lock';

const focusTrap = new FocusTrap('#myDialog');
focusTrap.activate();
// When done
focusTrap.deactivate();

Auto focusing on the first focusable element

Automatically focuses the first focusable element within the component when activated. This is useful for ensuring that users start interacting with the most relevant part of a newly opened UI component.

import { AutoFocusInside } from 'focus-lock';

<AutoFocusInside>
  <input type='text' />
  <button>Click me</button>
</AutoFocusInside>

Return focus to initial element on deactivation

When the focus lock is deactivated, focus can be programmatically moved back to the initially focused element before the focus lock was activated, maintaining a logical flow of interaction.

import { MoveFocusInside } from 'focus-lock';

const initialFocus = document.getElementById('initialFocus');
// After deactivating the focus lock
MoveFocusInside(initialFocus);