mirror of
https://github.com/google/blockly.git
synced 2026-01-11 02:47:09 +01:00
355 lines
12 KiB
JavaScript
355 lines
12 KiB
JavaScript
/**
|
|
* 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 handles tree keyboard navigation.
|
|
* This is a singleton service for the entire application.
|
|
*
|
|
* @author madeeha@google.com (Madeeha Ghori)
|
|
*/
|
|
|
|
blocklyApp.TreeService = ng.core
|
|
.Class({
|
|
constructor: function() {
|
|
// Keeping track of the last key pressed. If the user presses
|
|
// enter (to edit a text input or press a button), the keyboard
|
|
// focus shifts to that element. In the next keystroke, if the user
|
|
// navigates away from the element using the arrow keys, we want
|
|
// to shift focus back to the tree as a whole.
|
|
this.previousKey_ = null;
|
|
},
|
|
getToolboxTreeNode_: function() {
|
|
return document.getElementById('blockly-toolbox-tree');
|
|
},
|
|
getWorkspaceTreeNodes_: function() {
|
|
// Returns a list of all the top-level workspace tree nodes on the page.
|
|
return Array.from(document.querySelectorAll('ol.blocklyWorkspaceTree'));
|
|
},
|
|
getAllTreeNodes_: function() {
|
|
// Returns a list of all top-level tree nodes on the page.
|
|
var trees = [];
|
|
|
|
trees.push(document.getElementById('blockly-toolbox-tree'));
|
|
// TODO(sll): Extend this to handle injected toolbar buttons.
|
|
if (blocklyApp.workspace.topBlocks_.length > 0) {
|
|
trees.push(document.getElementById('clear-workspace'));
|
|
}
|
|
|
|
trees = trees.concat(this.getWorkspaceTreeNodes_());
|
|
return trees;
|
|
},
|
|
focusOnToolbox: function() {
|
|
this.getToolboxTreeNode_().focus();
|
|
},
|
|
isTopLevelWorkspaceTree: function(treeId) {
|
|
return this.getWorkspaceTreeNodes_().some(function(tree) {
|
|
return tree.id == treeId;
|
|
});
|
|
},
|
|
getNodeToFocusOnWhenTreeIsDeleted: function(deletedTreeId) {
|
|
// This returns the node to focus on after the deletion happens.
|
|
// We shift focus to the next tree (if it exists), otherwise we shift
|
|
// focus to the previous tree.
|
|
var workspaceTrees = this.getWorkspaceTreeNodes_();
|
|
for (var i = 0; i < workspaceTrees.length; i++) {
|
|
if (workspaceTrees[i].id == deletedTreeId) {
|
|
if (i + 1 < workspaceTrees.length) {
|
|
return workspaceTrees[i + 1];
|
|
} else if (i > 0) {
|
|
return workspaceTrees[i - 1];
|
|
}
|
|
}
|
|
}
|
|
|
|
return this.getToolboxTreeNode_();
|
|
},
|
|
goToNextTree: function(treeId) {
|
|
var trees = this.getAllTreeNodes_();
|
|
for (var i = 0; i < trees.length - 1; i++) {
|
|
if (trees[i].id == treeId) {
|
|
trees[i + 1].focus();
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
goToPreviousTree: function(treeId) {
|
|
var trees = this.getAllTreeNodes_();
|
|
for (var i = trees.length - 1; i > 0; i--) {
|
|
if (trees[i].id == treeId) {
|
|
trees[i - 1].focus();
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
// Make a given node the active descendant of a given tree.
|
|
setActiveDesc: function(node, tree, keepFocus) {
|
|
blocklyApp.debug && console.log('setting activeDesc for tree ' + tree.id);
|
|
|
|
var activeDesc = this.getActiveDesc(tree.id);
|
|
if (activeDesc) {
|
|
activeDesc.classList.remove('blocklyActiveDescendant');
|
|
activeDesc.setAttribute('aria-selected', 'false');
|
|
}
|
|
|
|
node.classList.add('blocklyActiveDescendant');
|
|
node.setAttribute('aria-selected', 'true');
|
|
tree.setAttribute('aria-activedescendant', node.id);
|
|
|
|
// Make sure keyboard focus is on the entire tree in the case where the
|
|
// focus was previously on a button or input element.
|
|
if (keepFocus) {
|
|
tree.focus();
|
|
}
|
|
},
|
|
getActiveDesc: function(treeId) {
|
|
var activeDescendantId = document.getElementById(
|
|
treeId).getAttribute('aria-activedescendant');
|
|
return document.getElementById(activeDescendantId);
|
|
},
|
|
onWorkspaceToolbarKeypress: function(e, treeId) {
|
|
blocklyApp.debug && console.log(
|
|
e.keyCode + 'inside TreeService onWorkspaceToolbarKeypress');
|
|
switch (e.keyCode) {
|
|
case 9:
|
|
// 16,9: shift, tab
|
|
if (e.shiftKey) {
|
|
blocklyApp.debug && console.log('shifttabbing');
|
|
// If the previous key is shift, we're shift-tabbing mode.
|
|
this.goToPreviousTree(treeId);
|
|
} else {
|
|
// If previous key isn't shift, we're tabbing.
|
|
this.goToNextTree(treeId);
|
|
}
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
break;
|
|
}
|
|
},
|
|
onKeypress: function(e, tree) {
|
|
var treeId = tree.id;
|
|
var node = this.getActiveDesc(treeId);
|
|
var keepFocus = this.previousKey_ == 13;
|
|
if (!node) {
|
|
blocklyApp.debug && console.log('KeyHandler: no active descendant');
|
|
}
|
|
blocklyApp.debug && console.log(e.keyCode + ': inside TreeService');
|
|
switch (e.keyCode) {
|
|
case 9:
|
|
// 16,9: shift, tab
|
|
if (e.shiftKey) {
|
|
blocklyApp.debug && console.log('shifttabbing');
|
|
// If the previous key is shift, we're shift-tabbing.
|
|
this.goToPreviousTree(treeId);
|
|
} else {
|
|
// If previous key isn't shift, we're tabbing
|
|
// we want to go to the run code button.
|
|
this.goToNextTree(treeId);
|
|
}
|
|
// Setting the previous key variable in each case because
|
|
// we only want to save the previous navigation keystroke,
|
|
// not any typing.
|
|
this.previousKey_ = e.keyCode;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
break;
|
|
case 37:
|
|
// Left-facing arrow: go out a level, if possible. If not, do nothing.
|
|
blocklyApp.debug && console.log('in left arrow section');
|
|
var nextNode = node.parentNode;
|
|
if (node.tagName == 'BUTTON' || node.tagName == 'INPUT') {
|
|
nextNode = nextNode.parentNode;
|
|
}
|
|
while (nextNode && nextNode.className != 'treeview' &&
|
|
nextNode.tagName != 'LI') {
|
|
nextNode = nextNode.parentNode;
|
|
}
|
|
if (!nextNode || nextNode.className == 'treeview') {
|
|
return;
|
|
}
|
|
this.setActiveDesc(nextNode, tree, keepFocus);
|
|
this.previousKey_ = e.keyCode;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
break;
|
|
case 38:
|
|
// Up-facing arrow: go up a level, if possible. If not, do nothing.
|
|
blocklyApp.debug && console.log('node passed in: ' + node.id);
|
|
var prevSibling = this.getPreviousSibling(node);
|
|
if (prevSibling && prevSibling.tagName != 'H1') {
|
|
this.setActiveDesc(prevSibling, tree, keepFocus);
|
|
} else {
|
|
blocklyApp.debug && console.log('no previous sibling');
|
|
}
|
|
this.previousKey_ = e.keyCode;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
break;
|
|
case 39:
|
|
blocklyApp.debug && console.log('in right arrow section');
|
|
var firstChild = this.getFirstChild(node);
|
|
if (firstChild) {
|
|
this.setActiveDesc(firstChild, tree, keepFocus);
|
|
} else {
|
|
blocklyApp.debug && console.log('no valid child');
|
|
}
|
|
this.previousKey_ = e.keyCode;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
break;
|
|
case 40:
|
|
// Down-facing arrow: go down a level, if possible.
|
|
// If not, do nothing.
|
|
blocklyApp.debug && console.log('preventing propogation');
|
|
var nextSibling = this.getNextSibling(node);
|
|
if (nextSibling) {
|
|
this.setActiveDesc(nextSibling, tree, keepFocus);
|
|
} else {
|
|
blocklyApp.debug && console.log('no next sibling');
|
|
}
|
|
this.previousKey_ = e.keyCode;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
break;
|
|
case 13:
|
|
// If I've pressed enter, I want to interact with a child.
|
|
blocklyApp.debug && console.log('enter is pressed');
|
|
var activeDesc = this.getActiveDesc(treeId);
|
|
if (activeDesc) {
|
|
var children = activeDesc.children;
|
|
var child = children[0];
|
|
if (children.length == 1 && (child.tagName == 'INPUT' ||
|
|
child.tagName == 'BUTTON')) {
|
|
if (child.tagName == 'BUTTON') {
|
|
child.click();
|
|
}
|
|
else if (child.tagName == 'INPUT') {
|
|
child.focus();
|
|
}
|
|
}
|
|
} else {
|
|
blocklyApp.debug && console.log('no activeDesc');
|
|
}
|
|
this.previousKey_ = e.keyCode;
|
|
break;
|
|
}
|
|
},
|
|
getFirstChild: function(element) {
|
|
if (!element) {
|
|
return element;
|
|
} else {
|
|
var childList = element.children;
|
|
for (var i = 0; i < childList.length; i++) {
|
|
if (childList[i].tagName == 'LI') {
|
|
return childList[i];
|
|
} else {
|
|
var potentialElement = this.getFirstChild(childList[i]);
|
|
if (potentialElement) {
|
|
return potentialElement;
|
|
}
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
},
|
|
getNextSibling: function(element) {
|
|
if (element.nextElementSibling) {
|
|
// If there is a sibling, find the list element child of the sibling.
|
|
var node = element.nextElementSibling;
|
|
if (node.tagName != 'LI') {
|
|
var listElems = node.getElementsByTagName('li');
|
|
// getElementsByTagName returns in DFS order
|
|
// therefore the first element is the first relevant list child.
|
|
return listElems[0];
|
|
} else {
|
|
return element.nextElementSibling;
|
|
}
|
|
} else {
|
|
var parent = element.parentNode;
|
|
while (parent && parent.tagName != 'OL') {
|
|
if (parent.nextElementSibling) {
|
|
var node = parent.nextElementSibling;
|
|
if (node.tagName == 'LI') {
|
|
return node;
|
|
} else {
|
|
return this.getFirstChild(node);
|
|
}
|
|
} else {
|
|
parent = parent.parentNode;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
},
|
|
getPreviousSibling: function(element) {
|
|
if (element.previousElementSibling) {
|
|
var sibling = element.previousElementSibling;
|
|
if (sibling.tagName == 'LI') {
|
|
return sibling;
|
|
} else {
|
|
return this.getLastChild(sibling);
|
|
}
|
|
} else {
|
|
var parent = element.parentNode;
|
|
while (parent) {
|
|
blocklyApp.debug && console.log('looping');
|
|
if (parent.tagName == 'OL') {
|
|
break;
|
|
}
|
|
if (parent.previousElementSibling) {
|
|
blocklyApp.debug && console.log('parent has a sibling!');
|
|
var node = parent.previousElementSibling;
|
|
if (node.tagName == 'LI') {
|
|
blocklyApp.debug && console.log('return the sibling of the parent!');
|
|
return node;
|
|
} else {
|
|
// Find the last list element child of the sibling of the parent.
|
|
return this.getLastChild(node);
|
|
}
|
|
} else {
|
|
parent = parent.parentNode;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
},
|
|
getLastChild: function(element) {
|
|
if (!element) {
|
|
blocklyApp.debug && console.log('no element');
|
|
return element;
|
|
} else {
|
|
var childList = element.children;
|
|
for (var i = childList.length - 1; i >= 0; i--) {
|
|
// Find the last child that is a list element.
|
|
if (childList[i].tagName == 'LI') {
|
|
return childList[i];
|
|
} else {
|
|
var potentialElement = this.getLastChild(childList[i]);
|
|
if (potentialElement) {
|
|
return potentialElement;
|
|
}
|
|
}
|
|
}
|
|
blocklyApp.debug && console.log('no last child');
|
|
return null;
|
|
}
|
|
}
|
|
});
|