4.0.2 • Published 5 years ago
react-a11y-menu v4.0.2
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 onMenu
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 yourmenuitems
. - You must spread
item
on eachmenuitem
in yourmenu
.
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
4.0.2
5 years ago
4.0.1
5 years ago
4.0.0
5 years ago
3.5.1
5 years ago
3.5.0
6 years ago
3.4.5
6 years ago
3.4.4
6 years ago
3.3.4
6 years ago
3.2.4
6 years ago
3.1.4
6 years ago
3.0.4
6 years ago
3.0.3
6 years ago
3.0.2
6 years ago
3.0.1
6 years ago
3.0.0
6 years ago
2.0.1
6 years ago
2.0.0
6 years ago
1.1.2
6 years ago
1.1.1
6 years ago
1.1.0
6 years ago
1.0.0
6 years ago