rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: link autocomplete input keyboard navigation (#1859)

Browse Source
This commit is contained in:
Aman Harwara
2022-10-23 10:41:19 +05:30
committed by GitHub
parent 5dd3d521cb
commit b98f5e2d02
2 changed files with 40 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/src/javascripts/Components/LinkedItems/ItemLinkAutocompleteInput.tsx
View File

@@ -92,6 +92,7 @@ const ItemLinkAutocompleteInput = ({ linkingController, focusPreviousItem, focus
break break
case KeyboardKey.Down: case KeyboardKey.Down:
if (searchQuery.length > 0) { if (searchQuery.length > 0) {
event.preventDefault()
searchResultsMenuRef.current?.focus() searchResultsMenuRef.current?.focus()
} }
break break

84
packages/web/src/javascripts/Hooks/useListKeyboardNavigation.ts
View File

@@ -1,27 +1,24 @@
import { KeyboardKey } from '@standardnotes/ui-services' import { KeyboardKey } from '@standardnotes/ui-services'
import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants' import { FOCUSABLE_BUT_NOT_TABBABLE } from '@/Constants/Constants'
import { useCallback, useState, useEffect, RefObject } from 'react' import { useCallback, useEffect, RefObject, useRef } from 'react'
export const useListKeyboardNavigation = (container: RefObject<HTMLElement | null>, initialFocus = 0) => { export const useListKeyboardNavigation = (container: RefObject<HTMLElement | null>, initialFocus = 0) => {
const [listItems, setListItems] = useState<HTMLButtonElement[]>() const listItems = useRef<HTMLButtonElement[]>([])
const [focusedItemIndex, setFocusedItemIndex] = useState<number>(initialFocus) const focusedItemIndex = useRef<number>(initialFocus)
const focusItemWithIndex = useCallback( const focusItemWithIndex = useCallback((index: number, items?: HTMLButtonElement[]) => {
(index: number, items?: HTMLButtonElement[]) => { focusedItemIndex.current = index
setFocusedItemIndex(index) if (items && items.length > 0) {
if (items && items.length > 0) { items[index]?.focus()
items[index]?.focus() } else {
} else { listItems.current[index]?.focus()
listItems?.[index]?.focus() }
} }, [])
},
[listItems],
)
useEffect(() => { useEffect(() => {
if (container.current) { if (container.current) {
container.current.tabIndex = FOCUSABLE_BUT_NOT_TABBABLE container.current.tabIndex = FOCUSABLE_BUT_NOT_TABBABLE
setListItems(Array.from(container.current.querySelectorAll('button'))) listItems.current = Array.from(container.current.querySelectorAll('button'))
} }
}, [container]) }, [container])
@@ -33,47 +30,44 @@ export const useListKeyboardNavigation = (container: RefObject<HTMLElement | nul
return return
} }
if (!listItems?.length) { listItems.current = Array.from(container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>)
setListItems(Array.from(container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>))
if (e.key === KeyboardKey.Up) {
let previousIndex = focusedItemIndex.current - 1
if (previousIndex < 0) {
previousIndex = listItems.current.length - 1
}
focusItemWithIndex(previousIndex)
} }
if (listItems) { if (e.key === KeyboardKey.Down) {
if (e.key === KeyboardKey.Up) { let nextIndex = focusedItemIndex.current + 1
let previousIndex = focusedItemIndex - 1 if (nextIndex > listItems.current.length - 1) {
if (previousIndex < 0) { nextIndex = 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)
} }
focusItemWithIndex(nextIndex)
} }
}, },
[container, focusItemWithIndex, focusedItemIndex, listItems], [container, focusItemWithIndex],
) )
const FIRST_ITEM_FOCUS_TIMEOUT = 20 const FIRST_ITEM_FOCUS_TIMEOUT = 20
const containerFocusHandler = useCallback(() => { const containerFocusHandler = useCallback(() => {
let temporaryItems = listItems && listItems?.length > 0 ? listItems : [] const items = Array.from(container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>)
if (!temporaryItems.length) { listItems.current = items
temporaryItems = Array.from(container.current?.querySelectorAll('button') as NodeListOf<HTMLButtonElement>)
setListItems(temporaryItems) if (items.length < 1) {
return
} }
if (temporaryItems.length > 0) {
const selectedItemIndex = Array.from(temporaryItems).findIndex((item) => item.dataset.selected) const selectedItemIndex = Array.from(items).findIndex((item) => item.dataset.selected)
const indexToFocus = selectedItemIndex > -1 ? selectedItemIndex : initialFocus const indexToFocus = selectedItemIndex > -1 ? selectedItemIndex : initialFocus
setTimeout(() => {
focusItemWithIndex(indexToFocus, temporaryItems) setTimeout(() => {
}, FIRST_ITEM_FOCUS_TIMEOUT) focusItemWithIndex(indexToFocus, items)
} }, FIRST_ITEM_FOCUS_TIMEOUT)
}, [container, focusItemWithIndex, initialFocus, listItems]) }, [container, focusItemWithIndex, initialFocus])
useEffect(() => { useEffect(() => {
const containerElement = container.current const containerElement = container.current