diff --git a/demos/keyboard_nav/index.html b/demos/keyboard_nav/index.html
index e2701e3c7..936d501b3 100644
--- a/demos/keyboard_nav/index.html
+++ b/demos/keyboard_nav/index.html
@@ -24,22 +24,23 @@
Keyboard Navigation is our first step towards an accessible Blockly.
You can enter accessibility mode by shift clicking anywhere on the
- workspace or on a block.
Some basic commands for moving around are below.
+ workspace or on a block.
Some basic commands for moving around are below.
More complete documentation is still in progress.
Workspace Navigation
W: Previous block/field/input at the same level
A: Up one level (Field (or input) -> Block -> Input (or field) -> Block ->
Stack -> Workspace)
S: Next block/field/input at the same level
- D: Down one level (Workspace -> Stack -> Block -> Input ( or field) -> Block
- -> Field (orinput))
+ D: Down one level (Workspace -> Stack -> Block -> Input (or field) -> Block
+ -> Field (or input))
T: Will open the toolbox. Once in there you can moving around using the WASD keys. And insert a block by hitting Enter
X: While on a connection hit X to disconnect the block after the cursor
Pre Order Traversal
- Feel free to just play around in accessibility mode or hit the button below to
- see the demo. The demo uses preorder tree traversal as an alternative way to navigate the blocks,
- connections, and fields on the workspace.
+ Feel free to just play around in accessibility mode or hit the button below to see the demo.
+ The demo uses preorder tree traversal
+ as an alternative way to navigate the blocks,
+ connections, and fields on the workspace.
@@ -52,7 +53,7 @@
-
+
@@ -84,38 +85,38 @@
-
+
- list
- item
+ list
+ item
-
+
-
+
EQ
-
+
ADD
-
+
1
-
+
1
-
+
ROOT
-
+
9
-
+
123
@@ -124,20 +125,20 @@
-
+
SET
FROM_START
-
- list
+
+ list
-
- item
+
+ item
-
+
@@ -146,9 +147,9 @@
-
+
-
+
10
@@ -163,28 +164,31 @@
toolbox: document.getElementById('toolbox')});
Blockly.Xml.domToWorkspace(document.getElementById('startBlocks'),
demoWorkspace);
+
/**
* Decides what nodes to traverse and which ones to skip. Currently, it
* skips output, stack and workspace nodes.
- * @param {Blockly.ASTNode} node The ast node to check whether it is valid.
- * @return {Boolean} True if the node should be visited, false otherwise.
+ * @param {Blockly.ASTNode} node The AST node to check whether it is valid.
+ * @return {boolean} True if the node should be visited, false otherwise.
* @package
*/
function validNode(node) {
var isValid = false;
- if (node && (node.getType() === Blockly.ASTNode.types.BLOCK
- || node.getType() === Blockly.ASTNode.types.INPUT
- || node.getType() === Blockly.ASTNode.types.FIELD
- || node.getType() === Blockly.ASTNode.types.NEXT
- || node.getType() === Blockly.ASTNode.types.PREVIOUS)) {
- isValid = true;
+ var type = node && node.getType();
+ if (type == Blockly.ASTNode.types.BLOCK ||
+ type == Blockly.ASTNode.types.INPUT ||
+ type == Blockly.ASTNode.types.FIELD ||
+ type == Blockly.ASTNode.types.NEXT ||
+ type == Blockly.ASTNode.types.PREVIOUS) {
+ isValid = true;
}
return isValid;
}
+
/**
* From the given node find either the next valid sibling or parent.
- * @param {Blockly.ASTNode} node The current position in the ast.
- * @return {Blockly.ASTNode} The parent ast node or null if there are no
+ * @param {Blockly.ASTNode} node The current position in the AST.
+ * @return {Blockly.ASTNode} The parent AST node or null if there are no
* valid parents.
* @package
*/
@@ -198,11 +202,12 @@
}
return findSiblingOrParent(node.out());
}
+
/**
- * Uses pre order traversal to go navigate the blockly ast. This will allow
- * a user to easily navigate the entire blockly AST without having to go in
+ * Uses pre order traversal to go navigate the Blockly AST. This will allow
+ * a user to easily navigate the entire Blockly AST without having to go in
* and out levels on the tree.
- * @param {Blockly.ASTNode} node The current position in the ast.
+ * @param {Blockly.ASTNode} node The current position in the AST.
* @return {Blockly.ASTNode} The next node in the traversal.
* @package
*/
@@ -215,18 +220,17 @@
return newNode;
} else if (newNode) {
return treeTraversal(newNode);
- } else {
- var siblingOrParent = findSiblingOrParent(node.out());
- if (validNode(siblingOrParent)) {
- return siblingOrParent;
- } else if (siblingOrParent
- && siblingOrParent.getType() !== Blockly.ASTNode.types.WORKSPACE) {
- return treeTraversal(siblingOrParent);
- } else {
- return null;
- }
}
+ var siblingOrParent = findSiblingOrParent(node.out());
+ if (validNode(siblingOrParent)) {
+ return siblingOrParent;
+ } else if (siblingOrParent &&
+ siblingOrParent.getType() !== Blockly.ASTNode.types.WORKSPACE) {
+ return treeTraversal(siblingOrParent);
+ }
+ return null;
}
+
/**
* Finds the next node in the tree traversal starting at the location of
* the cursor.
@@ -234,15 +238,16 @@
* @package
*/
function findNext() {
- var cursor = Blockly.Navigation.cursor_;
- var curNode = cursor.getCurNode();
- return treeTraversal(curNode);
+ var cursor = Blockly.Navigation.cursor_;
+ var curNode = cursor.getCurNode();
+ return treeTraversal(curNode);
}
+
/**
* Shows the next node in the tree traversal every second.
* @package
*/
- function demo () {
+ function demo() {
var doNext = function() {
var node = findNext();
Blockly.Navigation.cursor_.setLocation(node);
@@ -252,6 +257,7 @@
}
doNext();
}
+
/**
* Sets up accessibility mode so that the demo can successfully run.
* @package