react-chrono/dist/types/hooks/accessibility/useRovingTabIndex.d.ts

A Modern Timeline component for React

/**
 * Configuration for roving tabindex pattern
 */
export interface UseRovingTabIndexOptions {
    /** Array of items with IDs and optional disabled state */
    items: {
        id: string;
        disabled?: boolean;
    }[];
    /** Direction of navigation: horizontal (arrow left/right), vertical (arrow up/down), or both */
    orientation?: 'horizontal' | 'vertical' | 'both';
    /** Whether to wrap focus from last item to first (and vice versa) */
    loop?: boolean;
    /** Initial active item ID */
    initialActiveId?: string;
    /** Callback when active item changes */
    onActiveChange?: (id: string) => void;
    /** Whether to focus active item on initial load (default: true) */
    focusOnLoad?: boolean;
}
/**
 * Return value from useRovingTabIndex
 */
export interface UseRovingTabIndexReturn {
    /** Current active item ID */
    activeId: string;
    /** Get props for an item (tabIndex, onKeyDown, onFocus, ref) */
    getItemProps: (id: string) => {
        ref: React.RefObject<HTMLElement | null>;
        tabIndex: 0 | -1;
        onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
        onFocus: () => void;
    };
    /** Manually set active item */
    setActiveId: (id: string) => void;
}
/**
 * useRovingTabIndex - Implements ARIA roving tabindex pattern
 *
 * This hook manages keyboard navigation for composite widgets like toolbars,
 * menu bars, and list boxes. Only one item has tabIndex={0}, and arrow keys
 * move focus between items. Other items have tabIndex={-1}.
 *
 * WCAG References:
 * - 2.1.1 Keyboard (Level A)
 * - 2.4.3 Focus Order (Level A)
 * - ARIA APG Roving Tabindex Pattern
 *
 * @example
 * ```typescript
 * const { getItemProps, activeId } = useRovingTabIndex({
 *   items: [
 *     { id: 'first', disabled: false },
 *     { id: 'prev', disabled: disableLeft },
 *     { id: 'next', disabled: disableRight },
 *     { id: 'last', disabled: false },
 *   ],
 *   orientation: 'horizontal',
 *   loop: false,
 * });
 *
 * return (
 *   <div role="toolbar">
 *     <button {...getItemProps('first')}>First</button>
 *     <button {...getItemProps('prev')}>Previous</button>
 *     <button {...getItemProps('next')}>Next</button>
 *     <button {...getItemProps('last')}>Last</button>
 *   </div>
 * );
 * ```
 */
export declare const useRovingTabIndex: (options: UseRovingTabIndexOptions) => UseRovingTabIndexReturn;
//# sourceMappingURL=useRovingTabIndex.d.ts.map