trapFocus

Trap the tab navigation inside a given element.

TIP

To understand the "tab trap" usage, read Using JavaScript to trap focus in an element.

Usage

import { trapFocus, untrapFocus } from '@studiometa/js-toolkit/utils';

// Limit the tab navigation to focusable children of the document's body
document.addEventListener('keyup', (event) => {
  trapFocus(document.body, event);
});

// Resume the trap and refocus the previously focused element
untrapFocus();

Parameters

trapFocus

• element (HTMLElement): the element in which to trap the focus
• event (KeyboardEvent): the keyup event object

untrapFocus

The untrapFocus function does not need any argument.

Return value

Both functions return nothing.