rbox/static/js/focus-manager.js

export default class FocusManager {
    static trapFocus(element, logger = null) {
        const focusableSelectors = [
            'button',
            '[href]',
            'input',
            'select',
            'textarea',
            '[tabindex]:not([tabindex="-1"])'
        ].join(', ');

        const focusableElements = element.querySelectorAll(focusableSelectors);

        if (focusableElements.length === 0) {
            logger?.warn('No focusable elements found for trap');
            return;
        }

        const firstElement = focusableElements[0];
        const lastElement = focusableElements[focusableElements.length - 1];

        const handleKeydown = (e) => {
            if (e.key !== 'Tab') return;

            if (e.shiftKey) {
                if (document.activeElement === firstElement) {
                    lastElement.focus();
                    e.preventDefault();
                }
            } else {
                if (document.activeElement === lastElement) {
                    firstElement.focus();
                    e.preventDefault();
                }
            }
        };

        element.addEventListener('keydown', handleKeydown);

        return () => element.removeEventListener('keydown', handleKeydown);
    }

    static moveFocusToElement(element, options = {}) {
        const { smooth = true, center = true } = options;

        element.focus({ preventScroll: !smooth });

        if (smooth) {
            element.scrollIntoView({
                behavior: 'smooth',
                block: center ? 'center' : 'nearest'
            });
        }
    }

    static getFirstFocusableElement(container) {
        const focusableSelectors = [
            'button',
            '[href]',
            'input',
            'select',
            'textarea',
            '[tabindex]:not([tabindex="-1"])'
        ].join(', ');

        return container.querySelector(focusableSelectors);
    }

    static restoreFocus(element) {
        const prevElement = element.dataset.previousFocus;
        if (prevElement) {
            const el = document.querySelector(prevElement);
            if (el) el.focus();
        }
    }

    static saveFocus(element) {
        const current = document.activeElement;
        if (current) {
            element.dataset.previousFocus = current.getAttribute('data-focus-id') || current.id;
        }
    }
}