Move the focus between the items of a list with the arrow keys, keeping one tab stop.
This is custom React hooks, you need to follow the Basic Rules when you use it.
Tab into the group once, then use the arrow keys.
const useRovingIndex = (options: {
total: number
initialIndex?: number
orientation?: 'horizontal' | 'vertical'
loop?: boolean
onChange?: (index: number) => void
}) => {
selected: number
setSelected: (index: number) => void
getItemProps: (index: number) => {
ref: (element: HTMLElement | null) => void
tabIndex: number
onFocus: () => void
onKeyDown: (event: KeyboardEvent) => void
}
}