Role and semantics
Section titled “Role and semantics”ContextMenu is built on Base UI Context Menu. The menu has the menu role and the items menuitem, menuitemcheckbox or menuitemradio. The area itself takes no role.
Keyboard
Section titled “Keyboard”While the menu is open:
| Key | Behaviour |
|---|---|
| Up, Down | Move between items. |
| Letter keys | Move to the item that starts with that letter. |
| Enter, Space | Run the item. |
| Right, Left | Open or close a submenu. |
| Escape | Close the menu. |
Keyboard users may not be able to open the menu; the actions must also be reachable another way.
When the menu opens, focus moves into it, and it returns to the area on close. The highlighted item takes the hover surface.
Screen reader output
Section titled “Screen reader output”| Example | Output |
|---|---|
| Menu | “menu” |
| Item | “Edit, menu item, Command E” |
Contrast
Section titled “Contrast”Item text has 4.5:1 contrast on the raised surface; danger text 4.5:1.
WCAG 2.2
Section titled “WCAG 2.2”| Criterion | How ContextMenu meets it | What the product team does |
|---|---|---|
| 2.1.1 Keyboard | The open menu works with the keyboard. | Offer the same actions in a DropdownMenu or with buttons. |
| 2.5.1 Pointer gestures | A long press is a single-point gesture. | - |
| 4.1.2 Name, role, value | menu, menuitem. |
Write item names as verbs. |