Menu¶

Adds keyboard navigation support to an element with [role="menu"]. Also, recursively creates Menu/MenuBar instances for sub menus. Supports the following spec:

Key	Action
`Shift` + `Tab`	DESKTOP: Focus out of Menu. MOBILE: Navigates to the previous MenuItem.
`Tab`	DESKTOP: Focus into Menu. MOBILE: Navigates to the next MenuItem.
`⬆`	Navigates to previous MenuItem.
`⬇`	DESKTOP: Navigates to next MenuItem or navigates to the first sub menu MenuItem if it exists. MOBILE: Navigates to the next MenuItem.
`⬅`	DESKTOP: If the current menu instance has a parent MenuBar then navigate to previous MenuBar MenuItem. MOBILE: Navigates to the previous MenuItem.
`⮕`	DESKTOP: If the current menu instance has a parent MenuBar then navigate to next MenuBar MenuItem. MOBILE: Navigates to the next MenuItem.
`Home`	Navigates to the first MenuItem.
`End`	Navigates to the last MenuItem.
`Spacebar` or `Enter`	Navigates to the first sub menu MenuItem or clicks current MenuItem.
Any Character	Navigates to the closest MenuItem that starts with the matching character.

Note

Assumes a vertical orientation. For horizontal oriented menus see MenuBar.

Installation¶

Terminal

pnpm add @mvps-genesis/accessibility

Example Usage¶

.js¶

import {Menu} from '@mvps-genesis/accessibility';

// Basic instance constructor
new Menu({
    element: '.js-my-menu-element',
    breakpoint: '60em',
    navigateOnDown: true,
    navigateOnEnter: true,
    navigateOnSpace: true,
    subMenuFocusDelay: 100
});

// Create from NodeList
Menu.createFromNodeList(
    document.querySelectorAll('.js-my-menu-elements'),
    {
        breakpoint: '60em',
        navigateOnDown: true,
        navigateOnEnter: true,
        navigateOnSpace: true,
        subMenuFocusDelay: 100
    }
);

Parameters¶

object - options¶

Containing the following properties:

Note

If sub Menu/MenuBars are found these options will pass down into them.

string? - breakpoint¶

The breakpoint unit used to determine if the screen size is mobile. Optional. Defaults to '60em'.

string - element¶

The root [role="menu"] element to instantiate the keyboard navigation functionality.

boolean? - navigateOnDown¶

Whether or not to navigate into a sub menu on ⬇. Optional. Defaults to true.

boolean? - navigateOnEnter¶

Whether or not to navigate into a sub menu on Enter. Optional. Defaults to true.

boolean? - navigateOnSpace¶

Whether or not to navigate into a sub menu on Spacebar. Optional. Defaults to true.

The parent Menu instance. Used for recursive instantiation. Optional.

MenuBar? - parentMenuBar¶

The parent MenuBar instance. Used for recursive instantiation. Optional.

MenuItem? - parentMenuBarItem¶

The parent MenuBar MenuItem instance. Used for recursive instantiation. Optional.

MenuItem? - parentMenuItem¶

The parent MenuItem instance. Used for recursive instantiation. Optional.

int? - subMenuFocusDelay¶

The number of ms to wait for after navigating into a sub menu. Is used to prevent timing issues during animations when focusing "hidden" elements. Optional. Defaults to 100.