mirror of
https://github.com/google/blockly.git
synced 2026-01-10 10:27:08 +01:00
314 lines
11 KiB
JavaScript
314 lines
11 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 all tree keyboard navigation.
|
|
* A separate TreeService is constructed for each tree in the application.
|
|
*
|
|
* @author madeeha@google.com (Madeeha Ghori)
|
|
*/
|
|
|
|
blocklyApp.TreeService = ng.core
|
|
.Class({
|
|
constructor: function() {
|
|
blocklyApp.debug && console.log('making a new tree service');
|
|
this.trees = document.getElementsByClassName('blocklyTree');
|
|
// 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;
|
|
},
|
|
// 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;
|
|
}
|
|
},
|
|
goToNextTree: function(treeId, e) {
|
|
for (var i = 0; i < this.trees.length; i++) {
|
|
if (this.trees[i].id == treeId) {
|
|
if (i + 1 < this.trees.length) {
|
|
this.trees[i + 1].focus();
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
},
|
|
goToPreviousTree: function(treeId, e) {
|
|
if (treeId == this.trees[0].id) {
|
|
return;
|
|
}
|
|
for (var i = (this.trees.length - 1); i >= 0; i--) {
|
|
if (this.trees[i].id == treeId) {
|
|
if (i - 1 < this.trees.length) {
|
|
this.trees[i - 1].focus();
|
|
}
|
|
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;
|
|
}
|
|
}
|
|
});
|