/** * 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; tabIndex: 0 | -1; onKeyDown: (e: React.KeyboardEvent) => 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 ( *
* * * * *
* ); * ``` */ export declare const useRovingTabIndex: (options: UseRovingTabIndexOptions) => UseRovingTabIndexReturn; //# sourceMappingURL=useRovingTabIndex.d.ts.map