@supunlakmal/hooks/dist/types/hooks/user-interface-dom/useRovingTabIndex.d.ts

A collection of reusable React hooks

interface RovingTabIndexOptions {
    /** Selector for focusable elements within the container (default: '[role="option"], button, [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])') */
    focusableSelector?: string;
    /** Initial index to be focused (default: 0) */
    initialIndex?: number;
    /** Allow focus to wrap around (default: true) */
    wrapAround?: boolean;
    /** Orientation of the group for arrow key navigation (default: 'horizontal') */
    orientation?: 'horizontal' | 'vertical' | 'both';
    /** Function to call when the active index changes */
    onIndexChange?: (newIndex: number, element: HTMLElement) => void;
}
/**
 * Implements the roving tabindex accessibility pattern for keyboard navigation within a group.
 * Manages focus among a set of descendants of a container element.
 *
 * @param containerRef Ref object pointing to the container element.
 * @param options Configuration options for the roving tabindex behavior.
 */
export declare const useRovingTabIndex: <T extends HTMLElement>(containerRef: React.RefObject<T>, options?: RovingTabIndexOptions) => {
    activeIndex: number;
    setActiveIndex: import("react").Dispatch<import("react").SetStateAction<number>>;
    focusableElements: HTMLElement[];
};
export {};