Keyboard Navigation
You can enable keyboard navigation using keyNavigation property:var chart = new OrgChart(document.getElementById("tree"), { keyNavigation: true, ... });To select the node to be focused use focusId property:
var chart = new OrgChart(document.getElementById("tree"), { keyNavigation:{ focusId: 2 }, ... });
Use these keys to navigate in the chart:
- f - to go to find
- Arrows - to move to up/down/left/right
- Space - to expand/collapse
Key-down event
Use the key-down event to catch every key pressed.
You can use these 3 parameters to add key functions:
- args.node
- args.data
- args.event
chart.on('key-down', function(sender, args){ if (args.node){ if (args.event.code == "KeyN") { var newData = { id: sender.generateId(), pid: args.node.id }; sender.addNode(newData, null, true); } else if (args.event.code == "Enter" || args.event.code == "NumpadEnter") { sender.editUI.show(args.node.id); } else if (args.event.code === "KeyD") { sender.removeNode(args.node.id, null, true); } else if (args.event.code === "KeyS") { sender.exportSVG({ filename: "OrgChart.svg", expandChildren: false, nodeId: args.node.id }); } else if (args.event.code === "KeyP") { sender.exportPDF({ filename: "OrgChart.pdf", expandChildren: false, nodeId: args.node.id }); } else if (args.event.code === "KeyC") { sender.exportCSV(); } else if (args.event.code === "KeyX") { sender.exportXML(); } } });
Use keys "n", "Enter", "d", "s", "p", "c" and "x" in the following example:
Screen-reader-text event
Use the Screen-reader-text event to read the text using Screen reader.
You can use these 2 parameters to read the text:
- args.id
- args.text
chart.on('screen-reader-text', function(sender, args){ chart.on('screen-reader-text', function(sender, args){ var text = (sender.get(args.id)).name; args.text = text; }); });You need to install the Screen reader. extention for the following example: