Keyboard List/Menu navigation #310
Conversation
✅ Deploy Preview for reablocks-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
|
||
| const onKeyDown = useCallback((e: KeyboardEvent) => { | ||
| e.stopPropagation(); | ||
| if (e.key === 'ArrowLeft' || e.key === 'Escape') { |
There was a problem hiding this comment.
Wouldn't escape close the menu all together? I know the ExitListener often is handling this. Just calling this out.
There was a problem hiding this comment.
It is closing, but all levels together. But we need to give user ability get back to previous level
| const theme: ListTheme = useComponentTheme('list', customTheme); | ||
| const containerRef = useRef<HTMLDivElement>(null); | ||
|
|
||
| const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => { |
There was a problem hiding this comment.
Im not sure I agree this should be in List ( or at least not in the base list component ).
There was a problem hiding this comment.
Why not in the List? It is have the same functionality as menu and user should have ability to navigate it in the same way/
There was a problem hiding this comment.
Also, it works only for items with tab index (simplly say which have onClick callback)
If we don't need navigation in the List component then make sense. |
Lists don't need keyboard nav like this since they have tab navigation natively. |
Ok, will update. |
Thanks. Once done, don't forget to add docs about this. |
3 participants
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
Issue #309
What is the current behavior?
No way to navigate through Menu/List with the keyboard
What is the new behavior?
Added ability to navigate through Menu/List with the keyboard
Does this PR introduce a breaking change?
Other information
Screen.Recording.2025-10-02.at.13.38.09.mov