[UI Framework] [K7] Add keyboard navigation to KuiContextMenu. #14108
Conversation
cjcenizal
added
Team:Platform-Design
There was a problem hiding this comment.
Seems to work as advertised. Somehow got it into a state where the focus didn't match the click, but I couldn't replicate so I don't know what caused it. Took a screenshot though in case you can think something up.
TODOs make sense, feel free to merge whenever.
There was a problem hiding this comment.
This is gold! Thanks a lot for that. Except the two points you mentioned yourself, that should still be done (especially I like the Escape closing), I just found one bug (pressing left in upmost panel), and two suggestions for using state updater functions.
Since I am in vacation next week, I already give this a LGTM as long as those are fixed.
| const nextFocusedMenuItemIndex = this.state.focusedMenuItemIndex - 1; | ||
|
|
||
| this.setState({ | ||
| focusedMenuItemIndex: nextFocusedMenuItemIndex < 0 ? this.menuItems.length - 1 : nextFocusedMenuItemIndex, |
| const nextFocusedMenuItemIndex = this.state.focusedMenuItemIndex + 1; | ||
|
|
||
| this.setState({ | ||
| focusedMenuItemIndex: nextFocusedMenuItemIndex > this.menuItems.length - 1 ? 0 : nextFocusedMenuItemIndex, |
There was a problem hiding this comment.
Same here: should rather use updater function
| }); | ||
| }, 250); | ||
| } | ||
|
|
||
| showPreviousPanel = () => { | ||
| const previousPanelId = this.props.idToPreviousPanelIdMap[this.state.currentPanelId]; |
There was a problem hiding this comment.
There is actually a bug, that you can press Left in the topmost menu and will receive an empty menu. I assume a check here would be the fix.
|
Btw I've noticed something else, which may or may not be a bug in this component. On the ui framework docs page of this component the search in the menu doesn't work. It will immediately take the focus away when clicking into the search. It doesn't seem to happen on other component pages (though I haven't tested all of them). |
cjcenizal
force-pushed
the
k7/accessible-context-menu
branch
from
180d73e to
24f0fa7
Compare
…ver and return focus to originating element on close.
|
Thanks guys! I addressed the bugs and errors you found. |
You can use the up and down keys to navigate through the items in each menu, and the left and right keys to go to the previous and next menus. You can use the escape key to close the enclosing popover.
TODO: