@flexilla/utilities/dist/accessibility.d.ts

Utilities package for flexilla library

/**
 * Implements keyboard navigation for a container element and its focusable children.
 * This utility enables arrow key navigation, home/end support, and circular navigation
 * through focusable elements within a specified container.
 *
 * @param {KeyDirAccessibilityOptions} options - Configuration options for keyboard navigation
 * @param {HTMLElement | string} options.containerElement - The container element or its selector
 * @param {string | HTMLElement[]} [options.targetChildren='a:not([disabled]), button:not([disabled])'] - Focusable children elements or selector
 * @param {"up-down" | "left-right" | "all"} options.direction - Navigation direction mode
 *
 * @returns {{make: () => void, destroy: () => void}} An object containing methods to initialize and cleanup the keyboard navigation
 *
 * @example
 * // Basic usage with default settings
 * const nav = keyboardNavigation({
 *   containerElement: '.nav-container',
 *   direction: 'all'
 * });
 * nav.make();
 *
 * @example
 * // Custom configuration with specific child elements
 * const nav = keyboardNavigation({
 *   containerElement: document.getElementById('menu'),
 *   targetChildren: '.menu-item',
 *   direction: 'left-right'
 * });
 * nav.make();
 *
 * // Cleanup when no longer needed
 * nav.destroy();
 */
export declare const keyboardNavigation: ({ containerElement, targetChildren, direction }: KeyDirAccessibilityOptions) => {
    make: () => void;
    destroy: () => void;
};

/**
 * Configuration options for keyboard navigation functionality.
 *
 * @interface KeyDirAccessibilityOptions
 * @property {HTMLElement | string} [containerElement] - The container element or its selector that contains focusable children
 * @property {string | HTMLElement[]} [targetChildren] - Selector string for focusable children or array of HTMLElements
 * @property {"up-down" | "left-right" | "all"} direction - The allowed navigation directions:
 *   - "up-down": Only vertical arrow key navigation
 *   - "left-right": Only horizontal arrow key navigation
 *   - "all": Both vertical and horizontal navigation
 */
export declare type KeyDirAccessibilityOptions = {
    containerElement?: HTMLElement | string;
    targetChildren?: string | HTMLElement[];
    direction: "up-down" | "left-right" | "all";
};

export { }