diff --git a/accessible/README b/accessible/README
index 21c2e2025..d133fa828 100644
--- a/accessible/README
+++ b/accessible/README
@@ -5,10 +5,8 @@ Google's Blockly is a web-based, visual programming editor that is accessible
to blind users.
The code in this directory renders a version of the Blockly toolbox and
-workspace that is fully keyboard-navigable, and compatible with JAWS/NVDA
-screen readers on Firefox for Windows. (We chose this combination because JAWS
-and NVDA are the most robust screen readers, and are compatible with many more
-aria tags than other screen readers.)
+workspace that is fully keyboard-navigable, and compatible with most screen
+readers.
In the future, Accessible Blockly may be modified to suit accessibility needs
other than visual impairments. Note that deaf users are expected to continue
diff --git a/accessible/app.component.js b/accessible/app.component.js
index 763a13c11..f220af98b 100644
--- a/accessible/app.component.js
+++ b/accessible/app.component.js
@@ -29,6 +29,9 @@ blocklyApp.AppView = ng.core
.Component({
selector: 'blockly-app',
template: `
+
+ Status: {{getStatusMessage()}}
+
@@ -46,19 +49,28 @@ blocklyApp.AppView = ng.core
+
+
+
+
-
+
`,
directives: [blocklyApp.ToolboxComponent, blocklyApp.WorkspaceComponent],
pipes: [blocklyApp.TranslatePipe],
- // The clipboard, tree and utils services are declared here, so that all
- // components in the application use the same instance of the service.
+ // All services are declared here, so that all components in the
+ // application use the same instance of the service.
// https://www.sitepoint.com/angular-2-components-providers-classes-factories-values/
providers: [
- blocklyApp.ClipboardService, blocklyApp.TreeService,
- blocklyApp.UtilsService]
+ blocklyApp.ClipboardService, blocklyApp.NotificationsService,
+ blocklyApp.TreeService, blocklyApp.UtilsService]
})
.Class({
- constructor: [function() {}]
+ constructor: [blocklyApp.NotificationsService, function(_notificationsService) {
+ this.notificationsService = _notificationsService;
+ }],
+ getStatusMessage: function() {
+ return this.notificationsService.getStatusMessage();
+ }
});
diff --git a/accessible/clipboard.service.js b/accessible/clipboard.service.js
index db65e2d9f..84b0b4f52 100644
--- a/accessible/clipboard.service.js
+++ b/accessible/clipboard.service.js
@@ -24,12 +24,17 @@
blocklyApp.ClipboardService = ng.core
.Class({
- constructor: function() {
+ constructor: [
+ blocklyApp.NotificationsService, blocklyApp.UtilsService,
+ function(_notificationsService, _utilsService) {
this.clipboardBlockXml_ = null;
- this.clipboardBlockSuperiorConnection_ = null;
+ this.clipboardBlockPreviousConnection_ = null;
this.clipboardBlockNextConnection_ = null;
+ this.clipboardBlockOutputConnection_ = null;
this.markedConnection_ = null;
- },
+ this.notificationsService = _notificationsService;
+ this.utilsService = _utilsService;
+ }],
areConnectionsCompatible_: function(blockConnection, connection) {
// Check that both connections exist, that it's the right kind of
// connection, and that the types match.
@@ -39,11 +44,20 @@ blocklyApp.ClipboardService = ng.core
connection.checkType_(blockConnection));
},
isCompatibleWithClipboard: function(connection) {
- var superiorConnection = this.clipboardBlockSuperiorConnection_;
+ var previousConnection = this.clipboardBlockPreviousConnection_;
var nextConnection = this.clipboardBlockNextConnection_;
+ var outputConnection = this.clipboardBlockOutputConnection_;
return Boolean(
- this.areConnectionsCompatible_(connection, superiorConnection) ||
- this.areConnectionsCompatible_(connection, nextConnection));
+ this.areConnectionsCompatible_(connection, previousConnection) ||
+ this.areConnectionsCompatible_(connection, nextConnection) ||
+ this.areConnectionsCompatible_(connection, outputConnection));
+ },
+ getMarkedConnectionBlock: function() {
+ if (!this.markedConnection_) {
+ return null;
+ } else {
+ return this.markedConnection_.getSourceBlock();
+ }
},
isMovableToMarkedConnection: function(block) {
// It should not be possible to move any ancestor of the block containing
@@ -52,7 +66,7 @@ blocklyApp.ClipboardService = ng.core
return false;
}
- var markedSpotAncestorBlock = this.markedConnection_.getSourceBlock();
+ var markedSpotAncestorBlock = this.getMarkedConnectionBlock();
while (markedSpotAncestorBlock) {
if (markedSpotAncestorBlock.id == block.id) {
return false;
@@ -82,24 +96,28 @@ blocklyApp.ClipboardService = ng.core
},
markConnection: function(connection) {
this.markedConnection_ = connection;
- alert(Blockly.Msg.MARKED_SPOT_MSG);
+ this.notificationsService.setStatusMessage(Blockly.Msg.MARKED_SPOT_MSG);
},
cut: function(block) {
- var blockSummary = block.toString();
- this.copy(block, false);
+ this.copy(block);
block.dispose(true);
- alert(Blockly.Msg.CUT_BLOCK_MSG + blockSummary);
},
- copy: function(block, announce) {
+ copy: function(block) {
this.clipboardBlockXml_ = Blockly.Xml.blockToDom(block);
- this.clipboardBlockSuperiorConnection_ = block.outputConnection ||
- block.previousConnection;
+ this.clipboardBlockPreviousConnection_ = block.previousConnection;
this.clipboardBlockNextConnection_ = block.nextConnection;
- if (announce) {
- alert(Blockly.Msg.COPIED_BLOCK_MSG + block.toString());
- }
+ this.clipboardBlockOutputConnection_ = block.outputConnection;
},
- pasteFromClipboard: function(connection) {
+ pasteFromClipboard: function(inputConnection) {
+ var connection = inputConnection;
+ // If the connection is a 'previousConnection' and that connection is
+ // already joined to something, use the 'nextConnection' of the
+ // previous block instead in order to do an insertion.
+ if (inputConnection.type == Blockly.PREVIOUS_STATEMENT &&
+ inputConnection.isConnected()) {
+ connection = inputConnection.targetConnection;
+ }
+
var reconstitutedBlock = Blockly.Xml.domToBlock(blocklyApp.workspace,
this.clipboardBlockXml_);
switch (connection.type) {
@@ -112,11 +130,12 @@ blocklyApp.ClipboardService = ng.core
default:
connection.connect(reconstitutedBlock.outputConnection);
}
- alert(
- Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG +
- reconstitutedBlock.toString());
+ this.notificationsService.setStatusMessage(
+ this.utilsService.getBlockDescription(reconstitutedBlock) + ' ' +
+ Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG);
+ return reconstitutedBlock.id;
},
- pasteToMarkedConnection: function(block, announce) {
+ pasteToMarkedConnection: function(block) {
var xml = Blockly.Xml.blockToDom(block);
var reconstitutedBlock = Blockly.Xml.domToBlock(
blocklyApp.workspace, xml);
@@ -142,12 +161,8 @@ blocklyApp.ClipboardService = ng.core
return;
}
- if (announce) {
- alert(
- Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG +
- reconstitutedBlock.toString());
- }
-
this.markedConnection_ = null;
+
+ return reconstitutedBlock.id;
}
});
diff --git a/accessible/field.component.js b/accessible/field.component.js
index bb6b4cf07..93a058857 100644
--- a/accessible/field.component.js
+++ b/accessible/field.component.js
@@ -28,38 +28,37 @@ blocklyApp.FieldComponent = ng.core
.Component({
selector: 'blockly-field',
template: `
-
-
-
-
-
-
+
+
+
+
+
+
+
-
-
-
+
+
+
// Checkboxes are not currently supported.
-
-
-
-
+
+
+
`,
- inputs: ['field', 'level', 'index', 'parentId'],
+ inputs: ['field', 'index', 'parentId', 'disabled', 'mainFieldId'],
pipes: [blocklyApp.TranslatePipe]
})
.Class({
@@ -79,22 +78,21 @@ blocklyApp.FieldComponent = ng.core
return mainLabel + ' ' + secondLabel;
},
generateElementNames: function() {
- var elementNames = ['listItem'];
- if (this.isTextInput()) {
- elementNames.push('input');
- } else if (this.isDropdown()) {
- elementNames.push('label');
+ var elementNames = [];
+ if (this.isDropdown()) {
var keys = this.getOptions();
for (var i = 0; i < keys.length; i++){
elementNames.push(keys[i], keys[i] + 'Button');
}
- } else if (this.isTextField() && this.hasVisibleText()) {
- elementNames.push('label');
}
return elementNames;
},
+ isNumberInput: function() {
+ return this.field instanceof Blockly.FieldNumber;
+ },
isTextInput: function() {
- return this.field instanceof Blockly.FieldTextInput;
+ return this.field instanceof Blockly.FieldTextInput &&
+ !(this.field instanceof Blockly.FieldNumber);
},
isDropdown: function() {
return this.field instanceof Blockly.FieldDropdown;
diff --git a/accessible/messages.js b/accessible/messages.js
index 8014beee2..d731bc1fe 100644
--- a/accessible/messages.js
+++ b/accessible/messages.js
@@ -50,7 +50,7 @@ Blockly.Msg.ARGUMENT_INPUT = 'argument input';
Blockly.Msg.ARGUMENT_BLOCK_ACTION_LIST = 'argument block action list';
Blockly.Msg.TEXT = 'text';
Blockly.Msg.BUTTON = 'button';
-Blockly.Msg.UNAVAILABLE = 'unavailable';
+Blockly.Msg.DISABLED = 'disabled';
Blockly.Msg.CURRENT_ARGUMENT_VALUE = 'current argument value:';
Blockly.Msg.COPY_TO_WORKSPACE = 'copy to workspace';
Blockly.Msg.COPY_TO_CLIPBOARD = 'copy to clipboard';
@@ -58,11 +58,16 @@ Blockly.Msg.COPY_TO_MARKED_SPOT = 'copy to marked spot';
Blockly.Msg.TOOLBOX = 'Toolbox';
Blockly.Msg.WORKSPACE = 'Workspace';
Blockly.Msg.ANY = 'any';
+Blockly.Msg.FOR = 'for';
Blockly.Msg.STATEMENT = 'statement';
Blockly.Msg.VALUE = 'value';
Blockly.Msg.CUT_BLOCK_MSG = 'Cut block: ';
-Blockly.Msg.COPIED_BLOCK_MSG = 'Copied block to clipboard: ';
-Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG = 'Pasted block from clipboard: ';
-Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG = 'Pasted block to marked spot: ';
+Blockly.Msg.COPIED_BLOCK_MSG = 'copied';
+Blockly.Msg.PASTED_BLOCK_FROM_CLIPBOARD_MSG = 'pasted';
+Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG = 'moved to marked spot';
Blockly.Msg.MARKED_SPOT_MSG = 'Marked spot';
Blockly.Msg.BLOCK_MOVED_TO_MARKED_SPOT_MSB = 'Block moved to marked spot: ';
+Blockly.Msg.TOOLBOX_BLOCK = 'toolbox block';
+Blockly.Msg.WORKSPACE_BLOCK = 'workspace block';
+Blockly.Msg.SUBMENU_INDICATOR = 'move right to view submenu';
+Blockly.Msg.OTHER_ACTIONS = 'Other actions';
diff --git a/accessible/notifications.service.js b/accessible/notifications.service.js
new file mode 100644
index 000000000..5bcf497f3
--- /dev/null
+++ b/accessible/notifications.service.js
@@ -0,0 +1,44 @@
+/**
+ * AccessibleBlockly
+ *
+ * Copyright 2016 Google Inc.
+ * https://developers.google.com/blockly/
+ *
+ * Licensed under the Apache License, Version 2.0 (the 'License');
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an 'AS IS' BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Angular2 Service that notifies the user about actions that
+ * they have taken, by updating an ARIA live region.
+ * @author sll@google.com (Sean Lip)
+ */
+
+blocklyApp.NotificationsService = ng.core
+ .Class({
+ constructor: [function() {
+ this.statusMessage_ = '';
+ }],
+ getStatusMessage: function() {
+ return this.statusMessage_;
+ },
+ setStatusMessage: function(newMessage) {
+ // Introduce a temporary status message, so that if, e.g., two "copy"
+ // operations are done in succession, both messages will be read.
+ this.statusMessage_ = '';
+
+ var that = this;
+ setTimeout(function() {
+ that.statusMessage_ = newMessage;
+ });
+ }
+ });
diff --git a/accessible/toolbox-tree.component.js b/accessible/toolbox-tree.component.js
index 64320458d..0bd31ac8f 100644
--- a/accessible/toolbox-tree.component.js
+++ b/accessible/toolbox-tree.component.js
@@ -29,70 +29,36 @@ blocklyApp.ToolboxTreeComponent = ng.core
selector: 'blockly-toolbox-tree',
template: `
0; i--) {
if (trees[i].id == treeId) {
trees[i - 1].focus();
- return true;
+ return trees[i - 1].id;
}
}
- return false;
+ return null;
},
getActiveDescId: function(treeId) {
return this.activeDescendantIds_[treeId] || '';
@@ -107,13 +109,11 @@ blocklyApp.TreeService = ng.core
var activeDesc = document.getElementById(activeDescId);
if (activeDesc) {
activeDesc.classList.remove('blocklyActiveDescendant');
- activeDesc.setAttribute('aria-selected', 'false');
}
},
markActiveDesc_: function(activeDescId) {
var newActiveDesc = document.getElementById(activeDescId);
newActiveDesc.classList.add('blocklyActiveDescendant');
- newActiveDesc.setAttribute('aria-selected', 'true');
},
// Runs the given function while preserving the focus and active descendant
// for the given tree.
@@ -133,20 +133,67 @@ blocklyApp.TreeService = ng.core
document.getElementById(treeId).focus();
}, 0);
},
+ // This clears the active descendant of the given tree. It is used just
+ // before the tree is deleted.
+ clearActiveDesc: function(treeId) {
+ this.unmarkActiveDesc_(this.getActiveDescId(treeId));
+ delete this.activeDescendantIds_[treeId];
+ },
// Make a given node the active descendant of a given tree.
setActiveDesc: function(newActiveDescId, treeId) {
this.unmarkActiveDesc_(this.getActiveDescId(treeId));
this.markActiveDesc_(newActiveDescId);
this.activeDescendantIds_[treeId] = newActiveDescId;
+
+ // Scroll the new active desc into view, if needed. This has no effect
+ // for blind users, but is helpful for sighted onlookers.
+ var activeDescNode = document.getElementById(newActiveDescId);
+ var documentNode = document.body || document.documentElement;
+ if (activeDescNode.offsetTop < documentNode.scrollTop ||
+ activeDescNode.offsetTop >
+ documentNode.scrollTop + window.innerHeight) {
+ window.scrollTo(0, activeDescNode.offsetTop);
+ }
+ },
+ initActiveDesc: function(treeId) {
+ // Set the active desc to the first child in this tree.
+ var tree = document.getElementById(treeId);
+ this.setActiveDesc(this.getFirstChild(tree).id, treeId);
+ },
+ getTreeIdForBlock: function(blockId) {
+ // Walk up the DOM until we get to the root node of the tree.
+ var domNode = document.getElementById(blockId + 'blockRoot');
+ while (!domNode.classList.contains('blocklyTree')) {
+ domNode = domNode.parentNode;
+ }
+ return domNode.id;
+ },
+ focusOnBlock: function(blockId) {
+ // Set focus to the tree containing the given block, and set the active
+ // desc for this tree to the given block.
+ var domNode = document.getElementById(blockId + 'blockRoot');
+ // Walk up the DOM until we get to the root node of the tree.
+ while (!domNode.classList.contains('blocklyTree')) {
+ domNode = domNode.parentNode;
+ }
+ domNode.focus();
+
+ // We need to wait a while to set the active desc, because domNode takes
+ // a while to be given an ID if a new tree has just been created.
+ // TODO(sll): Make this more deterministic.
+ var that = this;
+ setTimeout(function() {
+ that.setActiveDesc(blockId + 'blockRoot', domNode.id);
+ }, 100);
},
onWorkspaceToolbarKeypress: function(e, treeId) {
if (e.keyCode == 9) {
// Tab key.
- if (e.shiftKey) {
- this.focusOnPreviousTree_(treeId);
- } else {
- this.focusOnNextTree_(treeId);
- }
+ var destinationTreeId =
+ e.shiftKey ? this.focusOnPreviousTree_(treeId) :
+ this.focusOnNextTree_(treeId);
+ this.notifyUserAboutCurrentTree_(destinationTreeId);
+
e.preventDefault();
e.stopPropagation();
}
@@ -181,83 +228,147 @@ blocklyApp.TreeService = ng.core
// in the first place.
console.error('Could not handle deletion of block.' + blockRootNode);
},
+ notifyUserAboutCurrentTree_: function(treeId) {
+ if (this.getToolboxTreeNode_().id == treeId) {
+ this.notificationsService.setStatusMessage('Now in toolbox.');
+ } else {
+ var workspaceTreeNodes = this.getWorkspaceTreeNodes_();
+ for (var i = 0; i < workspaceTreeNodes.length; i++) {
+ if (workspaceTreeNodes[i].id == treeId) {
+ this.notificationsService.setStatusMessage(
+ 'Now in workspace component ' + (i + 1) + ' of ' +
+ workspaceTreeNodes.length);
+ }
+ }
+ }
+ },
onKeypress: function(e, tree) {
var treeId = tree.id;
var activeDesc = document.getElementById(this.getActiveDescId(treeId));
if (!activeDesc) {
console.error('ERROR: no active descendant for current tree.');
-
- // TODO(sll): Generalize this to other trees (outside the workspace).
- var workspaceTreeNodes = this.getWorkspaceTreeNodes_();
- for (var i = 0; i < workspaceTreeNodes.length; i++) {
- if (workspaceTreeNodes[i].id == treeId) {
- // Set the active desc to the first child in this tree.
- this.setActiveDesc(
- this.getFirstChild(workspaceTreeNodes[i]).id, treeId);
- break;
- }
- }
+ this.initActiveDesc(treeId);
return;
}
- var isFocusingIntoField = false;
+ if (e.altKey || e.ctrlKey) {
+ // Do not intercept combinations such as Alt+Home.
+ return;
+ } else if (document.activeElement.tagName == 'INPUT') {
+ // For input fields, only Esc and Tab keystrokes are handled specially.
+ if (e.keyCode == 27 || e.keyCode == 9) {
+ // For Esc and Tab keys, the focus is removed from the input field.
+ this.focusOnCurrentTree_(treeId);
- if (e.keyCode == 13) {
- // Enter key. The user wants to interact with a child.
- if (activeDesc.children.length == 1) {
- var child = activeDesc.children[0];
- if (child.tagName == 'BUTTON') {
- child.click();
- this.isFocusingIntoField = true;
- } else if (child.tagName == 'INPUT') {
- child.focus();
+ // In addition, for Tab keys, the user tabs to the previous/next tree.
+ if (e.keyCode == 9) {
+ var destinationTreeId =
+ e.shiftKey ? this.focusOnPreviousTree_(treeId) :
+ this.focusOnNextTree_(treeId);
+ this.notifyUserAboutCurrentTree_(destinationTreeId);
}
- }
- } else if (e.keyCode == 9) {
- // Tab key.
- if (e.shiftKey) {
- this.focusOnPreviousTree_(treeId);
- } else {
- this.focusOnNextTree_(treeId);
- }
- e.preventDefault();
- e.stopPropagation();
- } else if (e.keyCode >= 37 && e.keyCode <= 40) {
- // Arrow keys.
- if (e.keyCode == 37) {
- // Left arrow key. Go up a level, if possible.
- var nextNode = activeDesc.parentNode;
- if (this.isButtonOrFieldNode_(activeDesc)) {
- nextNode = nextNode.parentNode;
- }
- while (nextNode && nextNode.tagName != 'LI') {
- nextNode = nextNode.parentNode;
- }
- if (nextNode) {
- this.setActiveDesc(nextNode.id, treeId);
- }
- } else if (e.keyCode == 38) {
- // Up arrow key. Go to the previous sibling, if possible.
- var prevSibling = this.getPreviousSibling(activeDesc);
- if (prevSibling) {
- this.setActiveDesc(prevSibling.id, treeId);
- }
- } else if (e.keyCode == 39) {
- // Right arrow key. Go down a level, if possible.
- var firstChild = this.getFirstChild(activeDesc);
- if (firstChild) {
- this.setActiveDesc(firstChild.id, treeId);
- }
- } else if (e.keyCode == 40) {
- // Down arrow key. Go to the next sibling, if possible.
- var nextSibling = this.getNextSibling(activeDesc);
- if (nextSibling) {
- this.setActiveDesc(nextSibling.id, treeId);
- }
- }
- e.preventDefault();
- e.stopPropagation();
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ } else {
+ // Outside an input field, Enter, Tab and navigation keys are all
+ // recognized.
+ if (e.keyCode == 13) {
+ // Enter key. The user wants to interact with a button or an input
+ // field.
+ // Algorithm to find the field: do a DFS through the children until
+ // we find an INPUT or BUTTON element (in which case we use it).
+ // Truncate the search at child LI elements.
+ var dfsStack = Array.from(activeDesc.children);
+ while (dfsStack.length) {
+ var currentNode = dfsStack.shift();
+ if (currentNode.tagName == 'BUTTON') {
+ this.moveActiveDescToParent(treeId);
+ currentNode.click();
+ break;
+ } else if (currentNode.tagName == 'INPUT') {
+ currentNode.focus();
+ break;
+ } else if (currentNode.tagName == 'LI') {
+ continue;
+ }
+
+ if (currentNode.children) {
+ var reversedChildren = Array.from(currentNode.children).reverse();
+ reversedChildren.forEach(function(childNode) {
+ dfsStack.unshift(childNode);
+ });
+ }
+ }
+ } else if (e.keyCode == 9) {
+ // Tab key.
+ var destinationTreeId =
+ e.shiftKey ? this.focusOnPreviousTree_(treeId) :
+ this.focusOnNextTree_(treeId);
+ this.notifyUserAboutCurrentTree_(destinationTreeId);
+
+ e.preventDefault();
+ e.stopPropagation();
+ } else if (e.keyCode >= 35 && e.keyCode <= 40) {
+ // End, home, and arrow keys.
+ if (e.keyCode == 35) {
+ // End key. Go to the last sibling in the subtree.
+ var finalSibling = this.getFinalSibling(activeDesc);
+ if (finalSibling) {
+ this.setActiveDesc(finalSibling.id, treeId);
+ }
+ } else if (e.keyCode == 36) {
+ // Home key. Go to the first sibling in the subtree.
+ var initialSibling = this.getInitialSibling(activeDesc);
+ if (initialSibling) {
+ this.setActiveDesc(initialSibling.id, treeId);
+ }
+ } else if (e.keyCode == 37) {
+ // Left arrow key. Go up a level, if possible.
+ this.moveActiveDescToParent(treeId);
+ } else if (e.keyCode == 38) {
+ // Up arrow key. Go to the previous sibling, if possible.
+ var prevSibling = this.getPreviousSibling(activeDesc);
+ if (prevSibling) {
+ this.setActiveDesc(prevSibling.id, treeId);
+ } else {
+ this.notificationsService.setStatusMessage(
+ 'Reached top of list');
+ }
+ } else if (e.keyCode == 39) {
+ // Right arrow key. Go down a level, if possible.
+ var firstChild = this.getFirstChild(activeDesc);
+ if (firstChild) {
+ this.setActiveDesc(firstChild.id, treeId);
+ }
+ } else if (e.keyCode == 40) {
+ // Down arrow key. Go to the next sibling, if possible.
+ var nextSibling = this.getNextSibling(activeDesc);
+ if (nextSibling) {
+ this.setActiveDesc(nextSibling.id, treeId);
+ } else {
+ this.notificationsService.setStatusMessage(
+ 'Reached bottom of list');
+ }
+ }
+
+ e.preventDefault();
+ e.stopPropagation();
+ }
+ }
+ },
+ moveActiveDescToParent: function(treeId) {
+ var activeDesc = document.getElementById(this.getActiveDescId(treeId));
+ var nextNode = activeDesc.parentNode;
+ if (this.isButtonOrFieldNode_(activeDesc)) {
+ nextNode = nextNode.parentNode;
+ }
+ while (nextNode && nextNode.tagName != 'LI') {
+ nextNode = nextNode.parentNode;
+ }
+ if (nextNode) {
+ this.setActiveDesc(nextNode.id, treeId);
}
},
getFirstChild: function(element) {
@@ -278,6 +389,26 @@ blocklyApp.TreeService = ng.core
return null;
}
},
+ getFinalSibling: function(element) {
+ while (true) {
+ var nextSibling = this.getNextSibling(element);
+ if (nextSibling && nextSibling.id != element.id) {
+ element = nextSibling;
+ } else {
+ return element;
+ }
+ }
+ },
+ getInitialSibling: function(element) {
+ while (true) {
+ var previousSibling = this.getPreviousSibling(element);
+ if (previousSibling && previousSibling.id != element.id) {
+ element = previousSibling;
+ } else {
+ return element;
+ }
+ }
+ },
getNextSibling: function(element) {
if (element.nextElementSibling) {
// If there is a sibling, find the list element child of the sibling.
diff --git a/accessible/utils.service.js b/accessible/utils.service.js
index 5afd89698..3a7eef797 100644
--- a/accessible/utils.service.js
+++ b/accessible/utils.service.js
@@ -41,20 +41,17 @@ blocklyApp.UtilsService = ng.core
return idMap;
},
generateAriaLabelledByAttr: function(mainLabel, secondLabel, isDisabled) {
- var attrValue = mainLabel + ' ' + secondLabel;
+ var attrValue = mainLabel + (secondLabel ? ' ' + secondLabel : '');
if (isDisabled) {
attrValue += ' blockly-disabled';
}
return attrValue;
},
getInputTypeLabel: function(connection) {
- // Returns an upper case string in the case of official input type names.
- // Returns the lower case string 'any' if any official input type qualifies.
- // The differentiation between upper and lower case signifies the difference
- // between an input type (BOOLEAN, LIST, etc) and the colloquial english term
- // 'any'.
+ // Returns the input type name, or 'any' if any official input type
+ // qualifies.
if (connection.check_) {
- return connection.check_.join(', ').toUpperCase();
+ return connection.check_.join(', ');
} else {
return Blockly.Msg.ANY;
}
@@ -65,5 +62,13 @@ blocklyApp.UtilsService = ng.core
} else {
return Blockly.Msg.VALUE;
}
+ },
+ getBlockDescription: function(block) {
+ // We use 'BLANK' instead of the default '?' so that the string is read
+ // out. (By default, screen readers tend to ignore punctuation.)
+ return block.toString(undefined, 'BLANK');
+ },
+ isWorkspaceEmpty: function() {
+ return !blocklyApp.workspace.topBlocks_.length;
}
});
diff --git a/accessible/workspace-tree.component.js b/accessible/workspace-tree.component.js
index 83dda119b..8d7d02e7c 100644
--- a/accessible/workspace-tree.component.js
+++ b/accessible/workspace-tree.component.js
@@ -29,20 +29,54 @@ blocklyApp.WorkspaceTreeComponent = ng.core
selector: 'blockly-workspace-tree',
template: `
@@ -95,23 +100,29 @@ blocklyApp.WorkspaceTreeComponent = ng.core
})
.Class({
constructor: [
- blocklyApp.ClipboardService, blocklyApp.TreeService,
- blocklyApp.UtilsService,
- function(_clipboardService, _treeService, _utilsService) {
- this.infoBlocks = Object.create(null);
+ blocklyApp.ClipboardService, blocklyApp.NotificationsService,
+ blocklyApp.TreeService, blocklyApp.UtilsService,
+ function(
+ _clipboardService, _notificationsService, _treeService,
+ _utilsService) {
this.clipboardService = _clipboardService;
+ this.notificationsService = _notificationsService;
this.treeService = _treeService;
this.utilsService = _utilsService;
}],
+ getBlockDescription: function() {
+ return this.utilsService.getBlockDescription(this.block);
+ },
isIsolatedTopLevelBlock_: function(block) {
// Returns whether the given block is at the top level, and has no
// siblings.
- return Boolean(
- !block.nextConnection.targetConnection &&
- !block.previousConnection.targetConnection &&
- blocklyApp.workspace.topBlocks_.some(function(topBlock) {
- return topBlock.id == block.id;
- }));
+ var blockIsAtTopLevel = !block.getParent();
+ var blockHasNoSiblings = (
+ (!block.nextConnection ||
+ !block.nextConnection.targetConnection) &&
+ (!block.previousConnection ||
+ !block.previousConnection.targetConnection));
+ return blockIsAtTopLevel && blockHasNoSiblings;
},
removeBlockAndSetFocus_: function(block, deleteBlockFunc) {
// This method runs the given function and then does one of two things:
@@ -121,8 +132,13 @@ blocklyApp.WorkspaceTreeComponent = ng.core
if (this.isIsolatedTopLevelBlock_(block)) {
var nextNodeToFocusOn =
this.treeService.getNodeToFocusOnWhenTreeIsDeleted(this.tree.id);
+
+ this.treeService.clearActiveDesc(this.tree.id);
deleteBlockFunc();
- nextNodeToFocusOn.focus();
+ // Invoke a digest cycle, so that the DOM settles.
+ setTimeout(function() {
+ nextNodeToFocusOn.focus();
+ });
} else {
var blockRootNode = document.getElementById(this.idMap['blockRoot']);
var nextActiveDesc =
@@ -133,41 +149,104 @@ blocklyApp.WorkspaceTreeComponent = ng.core
}
},
cutBlock_: function() {
+ var blockDescription = this.getBlockDescription();
+
var that = this;
this.removeBlockAndSetFocus_(this.block, function() {
that.clipboardService.cut(that.block);
});
+
+ setTimeout(function() {
+ if (that.utilsService.isWorkspaceEmpty()) {
+ that.notificationsService.setStatusMessage(
+ blockDescription + ' cut. Workspace is empty.');
+ } else {
+ that.notificationsService.setStatusMessage(
+ blockDescription + ' cut. Now on workspace.');
+ }
+ });
},
deleteBlock_: function() {
+ var blockDescription = this.getBlockDescription();
+
var that = this;
this.removeBlockAndSetFocus_(this.block, function() {
that.block.dispose(true);
});
+
+ setTimeout(function() {
+ if (that.utilsService.isWorkspaceEmpty()) {
+ that.notificationsService.setStatusMessage(
+ blockDescription + ' deleted. Workspace is empty.');
+ } else {
+ that.notificationsService.setStatusMessage(
+ blockDescription + ' deleted. Now on workspace.');
+ }
+ });
},
pasteToConnection_: function(connection) {
+ var destinationTreeId = this.treeService.getTreeIdForBlock(
+ connection.getSourceBlock().id);
+ this.treeService.clearActiveDesc(destinationTreeId);
+
+ var newBlockId = this.clipboardService.pasteFromClipboard(connection);
+
+ // Invoke a digest cycle, so that the DOM settles.
var that = this;
- this.treeService.runWhilePreservingFocus(function() {
- // If the connection is a 'previousConnection' and that connection is
- // already joined to something, use the 'nextConnection' of the
- // previous block instead in order to do an insertion.
- if (connection.type == Blockly.PREVIOUS_STATEMENT &&
- connection.isConnected()) {
- that.clipboardService.pasteFromClipboard(
- connection.targetConnection);
- } else {
- that.clipboardService.pasteFromClipboard(connection);
- }
- }, this.tree.id);
+ setTimeout(function() {
+ that.treeService.focusOnBlock(newBlockId);
+ });
},
- sendToMarkedSpot_: function() {
- this.clipboardService.pasteToMarkedConnection(this.block, false);
+ moveToMarkedSpot_: function() {
+ var blockDescription = this.getBlockDescription();
+ var oldDestinationTreeId = this.treeService.getTreeIdForBlock(
+ this.clipboardService.getMarkedConnectionBlock().id);
+ this.treeService.clearActiveDesc(oldDestinationTreeId);
+
+ var newBlockId = this.clipboardService.pasteToMarkedConnection(
+ this.block);
var that = this;
this.removeBlockAndSetFocus_(this.block, function() {
that.block.dispose(true);
});
- alert('Block moved to marked spot: ' + this.block.toString());
+ // Invoke a digest cycle, so that the DOM settles.
+ setTimeout(function() {
+ that.treeService.focusOnBlock(newBlockId);
+
+ var newDestinationTreeId = that.treeService.getTreeIdForBlock(
+ newBlockId);
+ if (newDestinationTreeId != oldDestinationTreeId) {
+ // It is possible for the tree ID for the pasted block to change
+ // after the paste operation, e.g. when inserting a block between two
+ // existing blocks that are joined together. In this case, we need to
+ // also reset the active desc for the old destination tree.
+ that.treeService.initActiveDesc(oldDestinationTreeId);
+ }
+
+ that.notificationsService.setStatusMessage(
+ blockDescription + ' ' +
+ Blockly.Msg.PASTED_BLOCK_TO_MARKED_SPOT_MSG +
+ '. Now on moved block in workspace.');
+ });
+ },
+ copyBlock_: function() {
+ this.clipboardService.copy(this.block);
+ this.notificationsService.setStatusMessage(
+ this.getBlockDescription() + ' ' + Blockly.Msg.COPIED_BLOCK_MSG);
+ },
+ markSpotBelow_: function() {
+ this.clipboardService.markConnection(this.block.nextConnection);
+ },
+ markSpotAbove_: function() {
+ this.clipboardService.markConnection(this.block.previousConnection);
+ },
+ pasteToNextConnection_: function() {
+ this.pasteToConnection_(this.block.nextConnection);
+ },
+ pasteToPreviousConnection_: function() {
+ this.pasteToConnection_(this.block.previousConnection);
},
ngOnInit: function() {
var that = this;
@@ -183,15 +262,14 @@ blocklyApp.WorkspaceTreeComponent = ng.core
}, {
baseIdKey: 'copy',
translationIdForText: 'COPY_BLOCK',
- action: that.clipboardService.copy.bind(
- that.clipboardService, that.block, true),
+ action: that.copyBlock_.bind(that),
isDisabled: function() {
return false;
}
}, {
baseIdKey: 'pasteBelow',
translationIdForText: 'PASTE_BELOW',
- action: that.pasteToConnection_.bind(that, that.block.nextConnection),
+ action: that.pasteToNextConnection_.bind(that),
isDisabled: function() {
return Boolean(
!that.block.nextConnection ||
@@ -200,8 +278,7 @@ blocklyApp.WorkspaceTreeComponent = ng.core
}, {
baseIdKey: 'pasteAbove',
translationIdForText: 'PASTE_ABOVE',
- action: that.pasteToConnection_.bind(
- that, that.block.previousConnection),
+ action: that.pasteToPreviousConnection_.bind(that),
isDisabled: function() {
return Boolean(
!that.block.previousConnection ||
@@ -210,23 +287,21 @@ blocklyApp.WorkspaceTreeComponent = ng.core
}, {
baseIdKey: 'markBelow',
translationIdForText: 'MARK_SPOT_BELOW',
- action: that.clipboardService.markConnection.bind(
- that.clipboardService, that.block.nextConnection),
+ action: that.markSpotBelow_.bind(that),
isDisabled: function() {
return !that.block.nextConnection;
}
}, {
baseIdKey: 'markAbove',
translationIdForText: 'MARK_SPOT_ABOVE',
- action: that.clipboardService.markConnection.bind(
- that.clipboardService, that.block.previousConnection),
+ action: that.markSpotAbove_.bind(that),
isDisabled: function() {
return !that.block.previousConnection;
}
}, {
- baseIdKey: 'sendToMarkedSpot',
+ baseIdKey: 'moveToMarkedSpot',
translationIdForText: 'MOVE_TO_MARKED_SPOT',
- action: that.sendToMarkedSpot_.bind(that),
+ action: that.moveToMarkedSpot_.bind(that),
isDisabled: function() {
return !that.clipboardService.isMovableToMarkedConnection(
that.block);
@@ -240,18 +315,43 @@ blocklyApp.WorkspaceTreeComponent = ng.core
}
}];
+ // Generate a list of action buttons.
+ this.fieldButtonsInfo = [{
+ baseIdKey: 'markSpot',
+ translationIdForText: 'MARK_THIS_SPOT',
+ action: function(connection) {
+ that.clipboardService.markConnection(connection);
+ },
+ isDisabled: function() {
+ return false;
+ }
+ }, {
+ baseIdKey: 'paste',
+ translationIdForText: 'PASTE',
+ action: function(connection) {
+ that.pasteToConnection_(connection);
+ },
+ isDisabled: function(connection) {
+ return !that.isCompatibleWithClipboard(connection);
+ }
+ }];
+
// Make a list of all the id keys.
this.idKeys = ['blockRoot', 'blockSummary', 'listItem', 'label'];
this.actionButtonsInfo.forEach(function(buttonInfo) {
that.idKeys.push(buttonInfo.baseIdKey, buttonInfo.baseIdKey + 'Button');
});
+ this.fieldButtonsInfo.forEach(function(buttonInfo) {
+ for (var i = 0; i < that.block.inputList.length; i++) {
+ that.idKeys.push(
+ buttonInfo.baseIdKey + i, buttonInfo.baseIdKey + 'Button' + i);
+ }
+ });
for (var i = 0; i < this.block.inputList.length; i++) {
var inputBlock = this.block.inputList[i];
- if (inputBlock.connection && !inputBlock.connection.targetBlock()) {
- that.idKeys.push(
- 'inputList' + i, 'inputMenuLabel' + i, 'markSpot' + i,
- 'markSpotButton' + i, 'paste' + i, 'pasteButton' + i);
- }
+ that.idKeys.push(
+ 'inputList' + i, 'inputMenuLabel' + i, 'listItem' + i,
+ 'fieldLabel' + i);
}
},
ngDoCheck: function() {
diff --git a/accessible/workspace.component.js b/accessible/workspace.component.js
index 42eb84d4e..a2c940ec0 100644
--- a/accessible/workspace.component.js
+++ b/accessible/workspace.component.js
@@ -60,7 +60,9 @@ blocklyApp.WorkspaceComponent = ng.core
pipes: [blocklyApp.TranslatePipe]
})
.Class({
- constructor: [blocklyApp.TreeService, function(_treeService) {
+ constructor: [
+ blocklyApp.TreeService, blocklyApp.UtilsService,
+ function(_treeService, _utilsService) {
// ACCESSIBLE_GLOBALS is a global variable defined by the containing
// page. It should contain a key, toolbarButtonConfig, whose
// corresponding value is an Array with two keys: 'text' and 'action'.
@@ -71,6 +73,7 @@ blocklyApp.WorkspaceComponent = ng.core
ACCESSIBLE_GLOBALS.toolbarButtonConfig : [];
this.workspace = blocklyApp.workspace;
this.treeService = _treeService;
+ this.utilsService = _utilsService;
}],
clearWorkspace: function() {
this.workspace.clear();
@@ -86,6 +89,6 @@ blocklyApp.WorkspaceComponent = ng.core
this.treeService.onKeypress(e, tree);
},
isWorkspaceEmpty: function() {
- return !this.workspace.topBlocks_.length;
+ return this.utilsService.isWorkspaceEmpty();
}
});
diff --git a/blockly_compressed.js b/blockly_compressed.js
index ed2ea67e5..43f4608d5 100644
--- a/blockly_compressed.js
+++ b/blockly_compressed.js
@@ -11,22 +11,23 @@ goog.setTestOnly=function(a){if(goog.DISALLOW_TEST_ONLY_CODE)throw a=a||"",Error
goog.getObjectByName=function(a,b){for(var c=a.split("."),d=b||goog.global,e;e=c.shift();)if(goog.isDefAndNotNull(d[e]))d=d[e];else return null;return d};goog.globalize=function(a,b){var c=b||goog.global,d;for(d in a)c[d]=a[d]};
goog.addDependency=function(a,b,c,d){if(goog.DEPENDENCIES_ENABLED){var e;a=a.replace(/\\/g,"/");var f=goog.dependencies_;d&&"boolean"!==typeof d||(d=d?{module:"goog"}:{});for(var g=0;e=b[g];g++)f.nameToPath[e]=a,f.loadFlags[a]=d;for(d=0;b=c[d];d++)a in f.requires||(f.requires[a]={}),f.requires[a][b]=!0}};goog.ENABLE_DEBUG_LOADER=!0;goog.logToConsole_=function(a){goog.global.console&&goog.global.console.error(a)};
goog.require=function(a){if(!COMPILED){goog.ENABLE_DEBUG_LOADER&&goog.IS_OLD_IE_&&goog.maybeProcessDeferredDep_(a);if(goog.isProvided_(a))return goog.isInModuleLoader_()?goog.module.getInternal_(a):null;if(goog.ENABLE_DEBUG_LOADER){var b=goog.getPathFromDeps_(a);if(b)return goog.writeScripts_(b),null}a="goog.require could not find: "+a;goog.logToConsole_(a);throw Error(a);}};goog.basePath="";goog.nullFunction=function(){};
-goog.abstractMethod=function(){throw Error("unimplemented abstract method");};goog.addSingletonGetter=function(a){a.getInstance=function(){if(a.instance_)return a.instance_;goog.DEBUG&&(goog.instantiatedSingletons_[goog.instantiatedSingletons_.length]=a);return a.instance_=new a}};goog.instantiatedSingletons_=[];goog.LOAD_MODULE_USING_EVAL=!0;goog.SEAL_MODULE_EXPORTS=goog.DEBUG;goog.loadedModules_={};goog.DEPENDENCIES_ENABLED=!COMPILED&&goog.ENABLE_DEBUG_LOADER;goog.ALWAYS_TRANSPILE=!1;
-goog.NEVER_TRANSPILE=!1;
+goog.abstractMethod=function(){throw Error("unimplemented abstract method");};goog.addSingletonGetter=function(a){a.getInstance=function(){if(a.instance_)return a.instance_;goog.DEBUG&&(goog.instantiatedSingletons_[goog.instantiatedSingletons_.length]=a);return a.instance_=new a}};goog.instantiatedSingletons_=[];goog.LOAD_MODULE_USING_EVAL=!0;goog.SEAL_MODULE_EXPORTS=goog.DEBUG;goog.loadedModules_={};goog.DEPENDENCIES_ENABLED=!COMPILED&&goog.ENABLE_DEBUG_LOADER;goog.TRANSPILE="detect";
+goog.TRANSPILER="transpile.js";
goog.DEPENDENCIES_ENABLED&&(goog.dependencies_={loadFlags:{},nameToPath:{},requires:{},visited:{},written:{},deferred:{}},goog.inHtmlDocument_=function(){var a=goog.global.document;return null!=a&&"write"in a},goog.findBasePath_=function(){if(goog.isDef(goog.global.CLOSURE_BASE_PATH))goog.basePath=goog.global.CLOSURE_BASE_PATH;else if(goog.inHtmlDocument_())for(var a=goog.global.document.getElementsByTagName("SCRIPT"),b=a.length-1;0<=b;--b){var c=a[b].src,d=c.lastIndexOf("?"),d=-1==d?c.length:d;if("base.js"==
c.substr(d-7,7)){goog.basePath=c.substr(0,d-7);break}}},goog.importScript_=function(a,b){(goog.global.CLOSURE_IMPORT_SCRIPT||goog.writeScriptTag_)(a,b)&&(goog.dependencies_.written[a]=!0)},goog.IS_OLD_IE_=!(goog.global.atob||!goog.global.document||!goog.global.document.all),goog.importProcessedScript_=function(a,b,c){goog.importScript_("",'goog.retrieveAndExec_("'+a+'", '+b+", "+c+");")},goog.queuedModules_=[],goog.wrapModule_=function(a,b){return goog.LOAD_MODULE_USING_EVAL&&goog.isDef(goog.global.JSON)?
"goog.loadModule("+goog.global.JSON.stringify(b+"\n//# sourceURL="+a+"\n")+");":'goog.loadModule(function(exports) {"use strict";'+b+"\n;return exports});\n//# sourceURL="+a+"\n"},goog.loadQueuedModules_=function(){var a=goog.queuedModules_.length;if(0\x3c/script>')},goog.appendScriptSrcNode_=function(a){var b=goog.global.document,
-c=b.createElement("script");c.type="text/javascript";c.src=a;c.defer=!1;c.async=!1;b.head.appendChild(c)},goog.writeScriptTag_=function(a,b){if(goog.inHtmlDocument_()){var c=goog.global.document;if(!goog.ENABLE_CHROME_APP_SAFE_SCRIPT_LOADING&&"complete"==c.readyState){if(/\bdeps.js$/.test(a))return!1;throw Error('Cannot write "'+a+'" after document load');}if(void 0===b)if(goog.IS_OLD_IE_){var d=" onreadystatechange='goog.onScriptLoad_(this, "+ ++goog.lastNonModuleScriptIndex_+")' ";c.write('
+
@@ -40,6 +41,10 @@
font-weight: normal;
font-size: 140%;
}
+
+ *:focus {
+ background: yellow;
+ }
@@ -48,6 +53,13 @@
This is a simple demo of a version of Blockly designed for screen readers.
+
+ In Blockly, you can move blocks from the toolbox to the workspace and join
+ them to create programs. To navigate between components, use Tab or
+ Shift-Tab. When you're on a block, move right to access its submenus, and
+ move up or down to go to the next or previous block in the sequence.
+