focus-trap

13 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

focusTrap activation behavior

When a focus trap is activated, it ensures an element within the container has focus. If no element is focused, it focuses the first focusable element within the container, or the element specified by the initialFocus parameter if provided.

focusTrap external focus redirection

If an external cause such as a mouse click, script, or accessibility software results in focus moving to an element outside the focus trap container, focus is immediately redirected to the last-focused element inside the container.

focusTrap circular tab navigation

Using TAB on the last focusable element within the container moves focus to the first focusable element. Using Shift+TAB on the first element moves focus to the last focusable element.

focusTrap stack management

Only one focus trap can be active at a time. When a new focus trap is enabled while another is active, the existing trap is suspended and pushed onto a stack. Once the new trap is disabled, the most recently-suspended trap reactivates. Suspended focus traps can also be disabled, removing them from the stack.

focusTrap function API

The focusTrap function takes three arguments: container (HTMLElement, required) specifies the container where focus is trapped; initialFocus (HTMLElement, optional) specifies which element receives focus when the trap activates, defaulting to the first tabbable element; signal (AbortSignal, optional, default undefined) allows external control via an abort signal. If signal is omitted, focusTrap returns an AbortController that can be called with abort() to disable the trap.

focusTrap performance consideration

When activated, focus trap performs reflow to discover focusable elements. Avoid rapidly enabling and disabling focus traps to prevent performance issues.

focusTrap best practice for modal dialogs

Only activate a focus trap if all UI outside the trap container should be inert (non-interactive). Focus management is important for accessibility, especially for users not using a mouse. Avoid situations where multiple focus traps may be active simultaneously, such as dialogs that open other dialogs.

useFocusTrap hook basic usage

The useFocusTrap hook returns a containerRef that must be applied to the focus trap container element. The hook also returns an initialFocusRef that can be used to indicate the initially-focused element when the trap is activated.

useFocusTrap hook disable methods

The focus trap can be disabled in two ways: either by not rendering the component (which automatically aborts the focus trap on unmount), or by passing disabled: true to the useFocusTrap hook settings.

useFocusTrap restoreFocusOnCleanUp setting

The useFocusTrap hook accepts a restoreFocusOnCleanUp setting (boolean, default false). When set to true, the hook attempts to restore focus to the element that was focused immediately before the focus trap was enabled when the trap is disabled or unmounted.

FocusTrapHookSettings interface properties

FocusTrapHookSettings has four properties: containerRef (React.RefObject, default undefined) specifies the ref for the focus trap container; if provided, it must be manually applied to the container element; if not provided, the hook creates and returns it. initialFocusRef (React.RefObject, default undefined) specifies the ref for the initially-focused element; if not provided, the hook creates and returns it, and the first tabbable element is focused by default. disabled (boolean, default false) disables the focus trap when true. restoreFocusOnCleanUp (boolean, default false) restores focus to the previously-focused element when the trap is disabled or unmounted.

useFocusTrap example with containerRef

Example React component using useFocusTrap: export const FocusTrapExample = () => { const {containerRef} = useFocusTrap(); return (<div ref={containerRef as React.RefObject<HTMLDivElement>}><Button>Apple</Button><Button>Banana</Button><Button>Cantaloupe</Button></div>); }

focusTrap usage example with AbortController

Example of using focusTrap with AbortController: function showDialog() { const dialog = document.getElementById('myDialog'); if (dialog instanceof HTMLElement) { dialog.style.display = ''; return focusTrap(dialog); } } function hideDialog(controller: AbortController) { document.getElementById('myDialog')?.style.display = 'none'; controller.abort(); } const dialogController = showDialog(); if (dialogController) { hideDialog(controller); }

Give your agent this brain