vuestic-ui
Version:
Vue 3 UI Framework
47 lines (46 loc) • 1.59 kB
JavaScript
import { a as focusElement } from "../../../utils/focus.js";
import { u as useEvent } from "../../../composables/useEvent.js";
const NON_DISABLED_MENU_ITEM_SELECTOR = '[role="menuitem"]:not([aria-disabled="true"])';
const FOCUSED_MENU_ITEM_SELECTOR = '[role="menuitem"]:focus';
const makeMenuItemAttributes = (options) => ({
role: "menuitem",
tabindex: -1,
"aria-disabled": Boolean(options.disabled)
});
const makeMenuContainerAttributes = () => ({
role: "menu",
tabindex: 0
});
const useMenuKeyboardNavigation = (container) => {
useEvent("keydown", ({ key }) => {
if (!container.value) {
return;
}
const items = container.value.querySelectorAll(NON_DISABLED_MENU_ITEM_SELECTOR);
const focusedItem = container.value.querySelector(FOCUSED_MENU_ITEM_SELECTOR);
if (!items.length) {
return;
}
if (!focusedItem) {
const firstItem = container.value.querySelector(NON_DISABLED_MENU_ITEM_SELECTOR);
if (firstItem) {
focusElement(firstItem);
}
return;
}
if (key === "ArrowDown" || key === "ArrowRight") {
const focusedElementIndex = Array.from(items).indexOf(focusedItem);
focusElement(items[focusedElementIndex + 1]);
}
if (key === "ArrowUp" || key === "ArrowLeft") {
const focusedElementIndex = Array.from(items).indexOf(focusedItem);
focusElement(items[focusedElementIndex - 1]);
}
}, container);
};
export {
makeMenuItemAttributes as a,
makeMenuContainerAttributes as m,
useMenuKeyboardNavigation as u
};
//# sourceMappingURL=useMenuKeyboardNavigation.js.map