Create a focus trap that keeps focus within a container element.
The focus trap:
Focuses the first focusable element (or initialFocus) when activated
Cycles focus with Tab/Shift+Tab at boundaries
Marks every sibling of the container's ancestor chain as inert,
so screen-reader virtual cursors and pointer input can't reach
content outside the trap
Inserts invisible focus-guard sentinels before and after the
container so Tab from browser chrome / programmatic focus moves
get redirected back in cleanly
Restores focus to the previously focused element when deactivated
// In a dialog component constelement = yield*contentRef.get; yield*FocusTrap.make({ container:element, returnFocus:triggerElement, }); // Focus is now trapped within the dialog // When scope closes, focus returns to triggerElement
Create a focus trap that keeps focus within a container element.
The focus trap:
inert, so screen-reader virtual cursors and pointer input can't reach content outside the trap