feat(select): improve keyboard navigation in single select#1724
feat(select): improve keyboard navigation in single select#1724EdsonNhancale wants to merge 4 commits intodhis2:alphafrom
Conversation
- Add focus method to Input component for programmatic focus control - Add tabIndex and onKeyDown to OptionsList to enable keyboard navigation on the listbox - Forward ref to Filter component to allow focusing the filter input - When ArrowUp is pressed on the first option, focus moves to the filter input - When ArrowDown is pressed in filter input, focus moves to the listbox - This improves accessibility and user experience for keyboard-only users
kabaros
left a comment
kabaros
left a comment
There was a problem hiding this comment.
thanks for this @EdsonNhancale - it's much more complicated than I anticipated. Some comments here .. let me know if anything doesn't make sense.
| onFilterChange, | ||
| onFilterInputKeyDown, | ||
| filterRef, | ||
| onOptionsKeyDown, |
There was a problem hiding this comment.
is this onOptionsKeyDown used at all - I removed it all the way down, and everything seems to work as it is (since the hook has the reference to filter and controls focus)
There was a problem hiding this comment.
Hello, @kabaros , that listBoxRef.current?.focus() is what makes onOptionsKeyDown relevant.
If we remove it, it won't work very well.
components/input/src/input/input.js
Outdated
| } | ||
|
|
||
| focus() { | ||
| this.inputRef.current.focus() |
There was a problem hiding this comment.
just in case, make this a bit more defensive this.inputRef.current?.focus?.()
| <div | ||
| ref={ref} | ||
| role="listbox" | ||
| tabIndex="-1" |
There was a problem hiding this comment.
I don't think this is necessary? actually when we don't add it, we get the nice effect that we can continue typing while going up and down the list
There was a problem hiding this comment.
I use tabIndex="-1" to move the focus to the component. I think that if we remove it, it won't work properly.
Ensure the focus method does not throw when inputRef.current is null or undefined, which can occur in certain lifecycle states.
…onNhancale/ui into LIBS-812/keyboard-accessible
|
2 participants
Implements LIBS-812
Description
Enhanced keyboard accessibility for the single select component. Added focus control to the Input, forwarded ref to Filter, and enabled keyboard navigation in OptionsList. Pressing ArrowUp from the first option moves focus to the filter, and ArrowDown from the filter moves focus to the list, improving usability for keyboard-only users.
Known issues
Checklist
All points above should be relevant for feature PRs. For bugfixes, some points might not be relevant. In that case, just check them anyway to signal the work is done.
Screenshots