shelving/ui/util/focus.js

Toolkit for using data in JavaScript.

import { getFirstFocusable } from "../../util/focus.js";
/** Focus on the first focusable element inside an element. */
export function focusFirstFocusable(el) {
    if (el instanceof HTMLElement)
        getFirstFocusable(el)?.focus();
}
/**
 * Loop focus inside an element.
 * - Attempts to blur outside the `from` element refocus back on the first focusable element inside the element.
 */
export function loopFocus(element, nextTarget) {
    if (element && nextTarget && !element.contains(nextTarget))
        focusFirstFocusable(element);
}
/**
 * Loop focus inside an element in response to a `blur` event.
 * - Attempts to blur outside the `currentTarget` element refocus back on the first focusable element inside the element.
 */
export function eventLoopFocus({ currentTarget, relatedTarget }) {
    loopFocus(currentTarget, relatedTarget);
}