CodingPirates/blockly
1
0
Fork 0
mirror of https://github.com/google/blockly.git synced 2026-01-07 00:50:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

Clean up active desc properly when a tree is removed from the workspace. Handle tree and screenreader focus correctly for 'move to marked spot' operations.

Browse Source
This commit is contained in:
Sean Lip
2016-07-21 16:30:38 -07:00
parent 21f15aca48
commit 606a5e1d08
4 changed files with 40 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
accessible/clipboard.service.js
View File

@@ -149,5 +149,7 @@ blocklyApp.ClipboardService = ng.core
}
this.markedConnection_ = null;
return reconstitutedBlock.id;
}
});

14
accessible/tree.service.js
View File

@@ -133,12 +133,26 @@ 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;
},
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;
},
onWorkspaceToolbarKeypress: function(e, treeId) {
if (e.keyCode == 9) {
// Tab key.

22
accessible/workspace-tree.component.js
View File

@@ -122,6 +122,8 @@ 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();
} else {
@@ -165,14 +167,30 @@ blocklyApp.WorkspaceTreeComponent = ng.core
}, this.tree.id);
},
moveToMarkedSpot_: function() {
this.clipboardService.pasteToMarkedConnection(this.block, false);
// This involves three steps:
// - Put the block on the destination tree.
// - Remove the block from the source tree, while preserving the
// screenreader focus for that tree.
// - Change the current tree-level focus to the destination tree, and the
// screenreader focus for the destination tree to the block just moved.
var blockDescription = this.block.toString();
var newBlockId = this.clipboardService.pasteToMarkedConnection(
this.block, false);
var that = this;
this.removeBlockAndSetFocus_(this.block, function() {
that.block.dispose(true);
});
alert('Block moved to marked spot: ' + this.block.toString());
setTimeout(function() {
var destinationTreeId = that.treeService.getTreeIdForBlock(newBlockId);
document.getElementById(destinationTreeId).focus();
that.treeService.setActiveDesc(
newBlockId + 'blockRoot', destinationTreeId);
alert('Block moved to marked spot: ' + blockDescription);
});
},
ngOnInit: function() {
var that = this;

4
demos/accessible/index.html
View File

@@ -40,6 +40,10 @@
font-weight: normal;
font-size: 140%;
}
*:focus {
background: yellow;
}
</style>
</head>
<body>