react-a11y-menu

An zero-dependency, accessible React menu component.

Basically a React port of https://www.w3.org/TR/wai-aria-practices/examples/menu-button/menu-button-actions.html

NOTE: v4 is a breaking change from v3.

Requires

• React ^16.8 (the one with hooks)

Usage

<Menu id="my-menu">
  {({ menu, control, isOpen, item }) => (
    <>
    <button {...control}>Menu</button>
    {isOpen && (
      <ul {...menu}>
        <li {...item}>Apple</li>
        <li {...item}>Bananas</li>
        <li {...item}>Clementine</li>
        <li {...item}>Avocado</li>
        <li {...item}>Bee Honey</li>
        <li {...item}>Chives</li>
      </ul>
    )}
    </>
  )}
</Menu>

• The id prop on Menu is required.
• You must spread control on your the element you want to interact with to open and close your menu.
• Control menu hiding/displaying with the isOpen boolean.
• You must spread menu on the element that contains your menuitems.
• You must spread item on each menuitem in your menu.

NOTE: Exported code is ES6.

Behavior

Element with Focus	Key / Mouse Action	Result
Menu Control	Click	If menu is closed, open the menu & focus the first menu item. If menu is open, close the menu.
DOM outside menu	Click	Close the menu.
Menu Control	Enter	Open the menu & focus the first menu item
Menu Control	Space	Open the menu & focus the first menu item
Menu Control	↓	Open the menu & focus the first menu item
Menu Control	↑	Open the menu & focus the last menu item
Menu Item	Escape	Close the menu & focus the Menu Control
Menu Item	↓	Focus the next menu item; if at the end, focus the first menu item
Menu Item	↑	Focus the previous menu item; if at the beginning, focus the last menu item
Menu Item	Home	Focus the first menu item
Menu Item	End	Focus the last menu item
Menu Item	a-z	Focus the next menu item that begins with the letter; if none exist, do nothing

Author

neezer