89 lines
3.0 KiB
TypeScript
89 lines
3.0 KiB
TypeScript
import { KeyboardKey } from '@/Services/IOService'
|
|
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants'
|
|
import { useCallback, useState, useEffect, Ref } from 'preact/hooks'
|
|
|
|
export const useListKeyboardNavigation = (container: Ref<HTMLElement | null>, initialFocus = 0) => {
|
|
const [listItems, setListItems] = useState<HTMLButtonElement[]>()
|
|
const [focusedItemIndex, setFocusedItemIndex] = useState<number>(initialFocus)
|
|
|
|
const focusItemWithIndex = useCallback(
|
|
(index: number, items?: HTMLButtonElement[]) => {
|
|
setFocusedItemIndex(index)
|
|
if (items && items.length > 0) {
|
|
items[index]?.focus()
|
|
} else {
|
|
listItems?.[index]?.focus()
|
|
}
|
|
},
|
|
[listItems],
|
|
)
|
|
|
|
useEffect(() => {
|
|
if (container.current) {
|
|
container.current.tabIndex = FOCUSABLE_BUT_NOT_TABBABLE
|
|
setListItems(Array.from(container.current.querySelectorAll('button')))
|
|
}
|
|
}, [container])
|
|
|
|
const keyDownHandler = useCallback(
|
|
(e: KeyboardEvent) => {
|
|
if (e.key === KeyboardKey.Up || e.key === KeyboardKey.Down) {
|
|
e.preventDefault()
|
|
} else {
|
|
return
|
|
}
|
|
|
|
if (!listItems?.length) {
|
|
setListItems(Array.from(container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>))
|
|
}
|
|
|
|
if (listItems) {
|
|
if (e.key === KeyboardKey.Up) {
|
|
let previousIndex = focusedItemIndex - 1
|
|
if (previousIndex < 0) {
|
|
previousIndex = listItems.length - 1
|
|
}
|
|
focusItemWithIndex(previousIndex)
|
|
}
|
|
|
|
if (e.key === KeyboardKey.Down) {
|
|
let nextIndex = focusedItemIndex + 1
|
|
if (nextIndex > listItems.length - 1) {
|
|
nextIndex = 0
|
|
}
|
|
focusItemWithIndex(nextIndex)
|
|
}
|
|
}
|
|
},
|
|
[container, focusItemWithIndex, focusedItemIndex, listItems],
|
|
)
|
|
|
|
const FIRST_ITEM_FOCUS_TIMEOUT = 20
|
|
|
|
const containerFocusHandler = useCallback(() => {
|
|
let temporaryItems = listItems && listItems?.length > 0 ? listItems : []
|
|
if (!temporaryItems.length) {
|
|
temporaryItems = Array.from(container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>)
|
|
setListItems(temporaryItems)
|
|
}
|
|
if (temporaryItems.length > 0) {
|
|
const selectedItemIndex = Array.from(temporaryItems).findIndex((item) => item.dataset.selected)
|
|
const indexToFocus = selectedItemIndex > -1 ? selectedItemIndex : initialFocus
|
|
setTimeout(() => {
|
|
focusItemWithIndex(indexToFocus, temporaryItems)
|
|
}, FIRST_ITEM_FOCUS_TIMEOUT)
|
|
}
|
|
}, [container, focusItemWithIndex, initialFocus, listItems])
|
|
|
|
useEffect(() => {
|
|
const containerElement = container.current
|
|
containerElement?.addEventListener('focus', containerFocusHandler)
|
|
containerElement?.addEventListener('keydown', keyDownHandler)
|
|
|
|
return () => {
|
|
containerElement?.removeEventListener('focus', containerFocusHandler)
|
|
containerElement?.removeEventListener('keydown', keyDownHandler)
|
|
}
|
|
}, [container, containerFocusHandler, keyDownHandler])
|
|
}
|