ContextMenu
ContextMenu is triggered by a right click and displays a menu at the pointer's position.
The ContextMenu follows the WAI-ARIA - Menu and Menubar Pattern and WAI-ARIA - Menu Button Pattern for accessibility.
Keyboard Navigation
| Key | Description | State |
|---|---|---|
Space | Opens the submenu and focuses on the first not disabled item. | MenuItemButton |
| Activates the focused item and closes all menus. | MenuItem | |
| Checks the focused item. | MenuOptionItem | |
Enter | Opens the submenu and focuses on the first not disabled item. | MenuItemButton |
| Activates the focused item and closes all menus. | MenuItem | |
ArrowRight | Opens the submenu and focuses on the first not disabled item. | - |
ArrowLeft | For submenus, closes the submenu and focuses on the main menu. | - |
ArrowUp | Focuses on the previous not disabled item. If on the first item, focuses on the last not disabled item. | - |
ArrowDown | Focuses on the next not disabled item. If on the last item, focuses on the first not disabled item. | - |
Home | Focuses on the first not disabled item. | - |
End | Focuses on the last not disabled item. | - |
Escape | Closes all menus. | - |
ARIA Roles and Attributes
| Component | Roles and Attributes | Usage |
|---|---|---|
ContextMenuTrigger | role="application" | Indicates that it is a desktop application. |
aria-haspopup | Set to "menu". | |
aria-expanded | Set to "true" when menu is open, "false" when closed. | |
aria-controls | Set to the id of the related MenuList when menu is open, undefined when closed. | |
MenuItemButton | role="button" | Indicates that it is a button. |
id | id used to associate with MenuList. | |
aria-haspopup | Set to "menu". | |
aria-expanded | Set to "true" when menu is open, "false" when closed. | |
aria-controls | Set to the id of the related MenuList when menu is open, undefined when closed. | |
MenuList | role="menu" | Indicates that it is a menu. |
id | id used to associate with MenuItemButton. | |
tabindex | Set to "-1". | |
aria-activedescendant | Set to the id of the focused item. | |
aria-labelledby | Set to the id of the related MenuItemButton. | |
aria-hidden | Set to "true" when menu is open, "false" when closed. | |
MenuItem | role="menuitem" | Indicates that it is a menu item. |
id | id used to associate with MenuList. | |
tabindex | Set to "0" when focused, "-1" otherwise. | |
aria-disabled | Set to "true" when the item is disabled. | |
MenuOptionGroup | role="group" | Indicates that it is a group. |
MenuOptionItem | role | Set to menuitemradio when MenuOptionGroup type is "radio", set to "menuitemcheckbox" when type is "checkbox". |
tabindex | Set to "0" when focused, "-1" otherwise. | |
aria-checked | Set to "true" when item is checked, "false" when unchecked. | |
aria-disabled | Set to "true" when the item is disabled. |
Edit this page on GitHub