natura11y
Version:
Natura11y is an open-source design system for creating beautiful web interfaces with a focus on accessible interaction design and front-end development.
31 lines (19 loc) • 877 B
JavaScript
import { delegateEvent } from './utilities/eventDelegation';
import { getFocusableElements } from './utilities/focus';
import { handleArrowKeyNavigation } from './utilities/keyboardNavigation';
export default class MainMenu {
// Private properties
#primaryNavMenuList = document.querySelectorAll('.main-menu__nav');
// Public methods
init() {
this.#primaryNavMenuList.forEach(nav => {
delegateEvent(nav, 'keydown', ':is(button, a)', (event) => {
if (!['ArrowLeft', 'ArrowRight', 'Home', 'End'].includes(event.code)) return;
const items = getFocusableElements(nav, { exclude: ['.dropdown__menu', '[class*="mega-menu"]'] });
const index = items.indexOf(event.target);
if (index === -1) return;
handleArrowKeyNavigation(event, index, items, (targetIndex) => items[targetIndex].focus());
});
});
}
}