The web accessibility makes web content and web applications more accessible for people
with disabilities. It especially helps in dynamic content change and development of advanced user interface
controls with AJAX, HTML, JavaScript, and related technologies.
ContextMenu provides built-in compliance with WAI-ARIA specifications. WAI-ARIA support is
achieved through the attributes like aria-expanded, aria-haspopup applied for menu item in
ContextMenu. It helps the people with disabilities by providing information about the widget for assistive
technology in the screen readers. ContextMenu component contains the menu role and menuItem role.
Properties
Functionality
menu
This role will be specified for an item which have sub menu.
menuItem
This role will be specified for an item which do not have sub menus.
aria-haspopup
Indicates the availability and type of interactive popup element.
aria-expanded
Indicates whether the subtree can be expanded or collapsed, as well as whether its current state is expanded or collapsed.
Keyboard interaction
Keyboard shortcuts
Actions
Esc
Closes the opened ContextMenu.
Enter
Selects the focused item.
Up
Navigates up or to the previous menu item.
Down
Navigates down or to the next menu item.
Left
Close the current sub menu and navigates to parent menu..
Right
Navigates and open the next sub menu.
Source
Preview
index.jsx
index.html
index.css
index.tsx
Copied to clipboard
import{ enableRipple }from'@syncfusion/ej2-base';import{ ContextMenuComponent }from'@syncfusion/ej2-react-navigations';import*as React from'react';import*as ReactDom from'react-dom';enableRipple(true);functionApp(){let cmenu;let menuItems =[{iconCss:'e-menu-icons e-cut',text:'Cut'},{iconCss:'e-icons e-copy',text:'Copy'},{iconCss:'e-menu-icons e-paste',items:[{iconCss:'e-cm-icons e-pastetext',text:'Paste Text',},{iconCss:'e-cm-icons e-pastespecial',text:'Paste Special'}],text:'Paste'}];functiononCreated(){
cmenu.open(40,20);}return(<divclassName="container"><divid='target'>Right click / Touch hold to open the ContextMenu</div><ContextMenuComponentref={(scope)=> cmenu = scope}id='contextmenu'items={menuItems}created={onCreated}/></div>);}exportdefault App;
ReactDom.render(<App/>, document.getElementById('element'));
Copied to clipboard
<!DOCTYPEhtml><htmllang="en"><head><title>Syncfusion React ContextMenu</title><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1.0"/><metaname="description"content="Essential JS 2 for React Components"/><metaname="author"content="Syncfusion"/><linkhref="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css"rel="stylesheet"/><linkhref="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css"rel="stylesheet"/><linkhref="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css"rel="stylesheet"/><linkhref="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css"rel="stylesheet"/><linkhref="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css"rel="stylesheet"/><linkhref="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css"rel="stylesheet"/><linkhref="index.css"rel="stylesheet"/><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script><scriptsrc="systemjs.config.js"></script></head><body><divid='element'><divid='loader'>Loading....</div></div></body></html>