mcp/carbon-components-svelte
1
0
Fork 0
mirror of https://github.com/carbon-design-system/carbon-components-svelte.git synced 2025-09-18 11:36:36 +00:00
Code Issues Projects Releases Packages Wiki Activity

fix(context-menu): correctly tab in/out of nested menus

Browse source
This commit is contained in:
Eric Y Liu 2021-03-19 16:54:19 -07:00
commit 1101fe3bff
2 changed files with 25 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/ContextMenu/ContextMenu.svelte
View file

@ -113,6 +113,7 @@
}}"
on:keydown
on:keydown="{(e) => {
if ($hasPopup) return;
if (e.key === 'ArrowDown') {
if (focusIndex < options.length - 1) focusIndex++;
} else if (e.key === 'ArrowUp') {

26
src/ContextMenu/ContextMenuOption.svelte
View file

@ -60,6 +60,8 @@
let rootMenuPosition = [0, 0];
let currentIndex = -1;
let submenuOpen = false;
let focusIndex = 0;
let options = [];
const unsubCurrentIndex = ctx.currentIndex.subscribe((index) => {
currentIndex = index;
@ -186,13 +188,33 @@
await tick();
const options = ref.querySelectorAll('li[tabindex]');
options = [...ref.querySelectorAll('li[tabindex]')];
if (options[0]) options[0].focus();
if (options[focusIndex]) options[focusIndex].focus();
return;
}
if (submenuOpen) {
if (key === 'ArrowLeft') {
submenuOpen = false;
focusIndex = 0;
return;
}
if (key === 'ArrowDown') {
if (focusIndex < options.length - 1) focusIndex++;
} else if (key === 'ArrowUp') {
if (focusIndex === -1) {
focusIndex = options.length - 1;
} else {
if (focusIndex > 0) focusIndex--;
}
}
if (options[focusIndex]) options[focusIndex].focus();
}
if (key === ' ' || key === 'Enter') {
handleClick({ fromKeyboard: true });
}