@ou-imdt/utils/lib/firstFocusableNodeFrom.js

Utility library for interactive media development

// @todo allow/require this to be passed in?
import focusableSelector from './focusableSelector.js';

/**
 * Finds the first focusable node from a list.
 * @param {Iterable<Node>} list - The list of nodes to search.
 * @param {string} focusDelegate - The property name used as a focus delegate.
 * @returns {Node|null} The first focusable node or `null` if none found.
 */
export default function firstFocusableNodeFrom(list, focusDelegate) {
  for (const el of list) {
    // consider internal focusDelegate as focusable
    if (el[focusDelegate] instanceof Element) return el;
    // consider native delegatesFocus as focusable
    if (el.shadowRoot?.delegatesFocus) return el;
    // anything that matches the selector
    if (el.matches?.(focusableSelector)) return el;
  }
  return null;
}